bowman2001 / perplex

A Hugo theme to publish technical content (docs, news, blog, articles)
https://perplex.desider.at
Apache License 2.0
27 stars 11 forks source link

Support for animated gifs #171

Closed janvanveldhuizen closed 3 months ago

janvanveldhuizen commented 3 months ago

I think animated gifs can be converted to webp images too. Would it be possible to support that image format as well? Currently, animated gifs are rendered at their original size and do not scale like other images.

janvanveldhuizen commented 3 months ago

I added these lines to modImg.yaml:

process: compress: [ bmp, jpeg, webp, png ] lossless: [ tiff, gif ]

Result: the images are converted to the correct sizes, but the animations and colors are corrupted

janvanveldhuizen commented 3 months ago

I found a solution that works for me.

I use the lossless conversion to produce the output files. Then I run a bash script that picks up all those files, and run the gifsicle utility to make a proper conversion. I add this to my build and publish pipeline, and I'm done.

#!/bin/bash

for file in *-*x.gif; do
  if [[ $file =~ ^(.+)-([0-9]+)x\.gif$ ]]; then
    name="${BASH_REMATCH[1]}"
    size="${BASH_REMATCH[2]}"

    echo "Processing $file..."
    gifsicle --resize "${size}x" --colors 256 "$name.gif" > "$file"
  fi
done
janvanveldhuizen commented 3 months ago

Lastly, I did not manage to create a pipeline that runs successfully on the Gitlab website. The reason is that the conversion of the gifs takes too much cpu power. I set up a custom Gitlab Runner on my own network. That works. Unfortunately, the solution I found, won't help users who are not able to create their own Gitlab Runner.

bowman2001 commented 3 months ago

As far as I know, the WEBP format allows storing animated images like GIF does. But the Go library, which is used by Hugo for image processing, does not implement this possibility. There is currently no way to create animated images with Hugo.

Your approach to process animated images before they are included in a Hugo site is probably the best way for now.