search

11ty / eleventy-base-blog

A starter repository for a blog web site using the Eleventy static site generator.
https://demo-base-blog.11ty.dev/
MIT License
1.23k stars 619 forks source link

Support for animated gifs? #163

Closed elliot-nelson closed 10 months ago

elliot-nelson commented 10 months ago

I spun a new instance of the base blog following the instructions, and then ported over a bunch of markdown blog articles to try it out.

For the images, which are in each post folder, I converted from the standard markdown image format to the suggested image shortcode.

However, animated gifs are now "frozen" and don't animate - either in gif or avif format.

is this a known issue or should this work?

zachleat commented 10 months ago

https://www.11ty.dev/docs/plugins/image/#output-animated-gif-or-webp is what you need!

elliot-nelson commented 10 months ago

@zachleat Thanks for the pointer, it worked!

I ended up taking the built-in image shortcode builtin and if I remove the avif format and added the sharpOptions as suggested, my animated gifs started working. (I'm not sure if there's any unwanted overhead from adding the animated: true option to every image, even the regular jpgs and pngs; if so I guess the idea would be to wire up additional options to be passed in from the markdown pages.)

MoritzGiessmann commented 9 months ago

I had the same problem and I found it odd that I had to remove the avif option. Does anybody know why this is necessary to make animated GIFs work?

deriese commented 1 month ago

I have the same issues, and I wasn't able to resolve it completely yet. Removing the AVIF option and adding the global sharpOptions did allow for the gifs to be animated, but after the change they are now scaled vertically. My 73 frame 320 x 240 GIF ends up rendered as 320 x 17520 pixels (73x the height). I tried some things but none worked, maybe someone else knows what to do.