Aug. 14, 2021
Since I'm building this website as I'm driving it, I'm learning a lot of little random things about Wagtail that aren't quite worth a full tutorial. But they're worth writing down. So now you get to benefit from my desire to record random pieces of Wagtail knowledge in what will likely be a neverending series of posts. There are, as I'm finding, countless things to learn about Wagtail, Django and all the other pieces that support it.
Today's random thing I learned is about animated GIFs. Turns out that Wagtail's default image library, Pillow, doesn't support animated GIFs. I really honestly don't know who out there in the world uses non-animated GIFs these days so when I saw Wagtail supported GIF, I assumed that included the animated variety. Silly me.
Anyhoo, I discovered this while I was trying to upload a GIF of Wang Hedi to my website. Wang Hedi (aka Dylan Wang) is the male lead in a Chinese drama called The Rational Life that I'm currently obsessed with and that you should totally add to your Netflix queue right now. But I can gush about the show later. For this post, let's focus on the two things that were getting in the way of me posting this fun little GIF to my site.
My website is currently hosted on a DigitalOcean droplet using Nginx and Gunicorn. Gunicorn is an application server that translates requests from HTTP to Python. Nginx works in conjunction with Gunicorn to provide connection handling and security features.
Turns out one of the security features Nginx has is the ability to limit file uploads, and the default limit on file uploads is pretty darn tiny. It's only 1MB! So when I tried to upload that GIF, I got a 413 error that essentially said the file was too big to be uploaded. Since Wagtail's default text in the Images section says 10MB, and the adorable GIF I was trying to upload was only 2MB, I was pretty confused. Then I noticed most of the posts I found when I googled the 413 error were related to Nginx and I realized there was probably a server setting that needed to be adjusted.
The server setting is called client_max_body_size and you can add a line to the server block in your Nginx configuration file to adjust it. I did that, but it's probably not ultimately the best way to do it. As this person pointed out on Stack Overflow, it's apparently better to configure upload limits to specific directories and locations.
If I get around to figuring out how to do that, I'll be sure to update this post or add another tutorial. For now, let's move on to the next obstacle I ran into.
According to the official Wagtail documentation, the best way to add support for animated GIFs in Wagtail is using a Python package called Wand. This package requires a piece of Linux software called ImageMagick, which of course meant that I would have to go and install that on my server as well. Fortunately, Wand already includes good installation instructions for Ubuntu, which is the flavor of Linux I'm using to host this site.
Since this is my first time adding a new piece of software to the live production server, I decided this would be a great time to try DigitalOcean's snapshot capability. I've learned the hard way, never mess with Linux without a backup, preferably three backups at least. Then I went ahead and used the Ubuntu installation for Wand and ImageMagick. I'm fairly certain Wand is now installed universally on my server (don't quote me on that), but I went ahead and installed it in the virtual environment that my website lives in anyway. Then I rebooted Gunicorn to get the updates to take since you should always reboot Gunicorn after making changes to your Wagtail project in production.
Now I've discovered that all the gif previews in my image library are animating as well, which is annoying. But that's a problem for me to fix another day. Or if you happen to know how get GIFs to be still in the image library, but not in web content, please drop me a line.
In the meantime, please enjoy this GIF of Wang Hedi being an absolute delight.
