APNG animated PNG to work on site?

Discussion Ask a question
,
1

I’m attempting to add an APNG (animated PNG) to my site, however the image is simply showing up as static and not animated. I would just use a gif, except the photo I’m uploading has a fair amount of transparency and converting it to a gif ruins the look and colors. I cannot find anywhere if APNG files are supported or not, or if anyone possibly knows a work around for this. I’ve thought to upload it to an image hosting site, then embed the link in an HTML iFrame, but that does not work either. If anyone knows a possible solution to this that would be great, thanks.

2

Easy solution: put the image on the page and assign it the src URL (can be the Wix image URL or a url from other sites. like:

$w.onReady(() => {
$w("#image1").src = "https://static.wixstatic.com/media/43987a_1f69f18c44084c87997637a18acc63f2~mv2.png"
})
3

And actually you don’t even have to look for the specific image src.
You can add the image to the page and write:

$w("#image1").src = "https://static.wixstatic.com/media/" + $w("#image1").src.split("/")[3];
1 Like
4

Do I connect the image to data and then add that? or is that Code that I add in Dev Mode? If there is already an explanation on how to do what you just explained if you could post the link to it that would be greatly helpful! Kind of new to this

5

I’m not sure what exactly you’re trying to do.
If we’re talking about a static image, you can just put the code in the page code panel .
If it’s an image from the database then you can connect it to the dataset via the editor and then:

$w.onReady(() => {
$w("#dataet1").onReady(() => [
$w("#image1").src = "https://static.wixstatic.com/media/" + $w("#image1").src.split("/")[3];
})
})

If they’re images in a repeater then:

$w.onReady(() => {
$w("#repeater1").onItemReady(($i, iData) => {
$i("#image1").src = "https://static.wixstatic.com/media/" +  $i("#image1").src.split("/")[3];
})
})
6

Perfect. Thanks for this tip!
Odd the apng doesn’t work automatically like a gif does, but this code works.

For the beginners, you can see the #imageNUMBER when you hover over the photo in the editor. Remember to change “#image1” in the sample code above to match your image number