Animated GIFs with Craft CMS on Krystal Hosting

It took me a while to notice that GIFs uploaded here weren't working, mainly because legacy content from the old WordPress days seemed to be fine. Well, during the whole content migration/reshuffle I've been doing I realised that those old GIFs were working because they were using external hosting, which I'd prefer to move away from to prevent resource rot. However, when I reuploaded them to Craft... I ended up with static images. Woops!

The tricky part was working out exactly where in the upload chain the problem was occurring. I had assumed it was during upload, but figured one way to test that would be to download an already uploaded file and run it locally, so that's what I did. Weirdly, the file animated fine. Okay, so it wasn't during upload then, but possibly during build? Except CMS-hosted files are ignored by Gatsby and Netlify, being served at runtime just like any other hosted image. Maybe it was my implementation on the frontend? Is there some weird browser behaviour when you're using <figure> or <picture> instead of <img> maybe? The short answer is nope, they all work the same.

That sent me back to the initial theory and some further testing showed that the conversion was happening on upload, just somehow non-destructively so you can retrieve the animation by saving elsewhere. I still don't really understand that part but it was a massive red herring 😅 Now at least I knew where to look, which allowed me to find a few useful questions on Stack Overflow and GitHub. The answer? ImageMagick. Basically, Craft piggybacks on either GD or ImageMagick for reading/writing image files and it'll pick the best one for you based on your server config. The issue is that GD can't cope with GIFs, effectively flattening them down to static files, so if you want to be able to upload animated images you need to force Craft to use ImageMagick instead.

I use Krystal (formerly Smart Hosting) for my CMS hosting and they have ImageMagick preinstalled on all plans, so Craft should have been using it correctly. But when I actually took a look at my php.ini file I found imagick, the PHP ImageMagick helper library, was disabled 🤦‍♂️ Having enabled imagick[1], the final step was to force Craft to override its previous behaviour, which you do (as with most things in Craft) in the general.php config file. All you have to add is the following line to your main profile[2]:

'imageDriver' => 'imagick',

That will force Craft to prioritise ImageMagick over GD for uploads moving forward. A few quick image replacements later at GIFs are now working perfectly:

Barney from How I Met Your Mother clapping excitedly whilst confetti rains down around him.
🥳

Explore Other Articles

Newer

Thoughts on Disney+

Two months after Disney+ launched I'm still a huge fan of the content catalogue but swing between feeling bemused and exasperated at the actual experience of using the service.

Older

Crafty Aliases & Environment Variables

Craft CMS has the ability to accept environment variables as well as aliases. It can be worthwhile understanding how these two seemingly similar concepts differ, and when you might want to use one over the other.

Further Reading & Sources

Conversation

Want to take part?

Comments are powered by Webmentions; if you know what that means, do your thing 👍

Footnotes

  • <p>Every time I upload a GIF to this website it ends up rendered as a single frame. It's taken me quite a while to get to the bottom of why that is.</p>
  • Murray Adcock.
Article permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.