How to Use Animated GIFs as WordPress Featured Images

November 17, 2016 8:52am

When you upload an animated GIF to WordPress, it does all of it’s resizing magic to make the various thumbnail sizes (defaults are thumbnail, medium and large, in addition to the original full). When it does this, the resized versions lose their animation.

If your theme displays featured images at any size other than full, you’ll thusly lose your GIF’s animation.

If you definitely know that you want to display the animated version, though, there’s a little trick you can use.

What we’re doing here is getting the URL of our featured image, then we make sure it’s all lower case letters (WordPress may do this anyway, but just to be safe), then we check to see if .gif is present in the thumbnail’s URL, and finally, if it is, we set the thumbnail size we use to ‘large’. Doing so will allow us to use the original image, which retains it’s animation.

Then, we just need to tell our call to the_post_thumbnail() to use the variable thumbnail size we set, like this:

the_post_thumbnail($thumb_size)

There you go! Animated GIFs now work as featured images.

Drawbacks?

You may need to alter your theme’s CSS, or otherwise accommodate for that fact that you’ll now be using the full-sized image for GIFs, so they may not fit neatly into your theme’s display, and they also certainly won’t be optimized for different sizes and displays.

“Portfolio Pages” aren’t a default WordPress feature, I’m guessing it’s a custom post type that your theme uses. It’d be hard for me to comment on that since I’m not sure how the theme / portfolio is outputting images.

hello, this code didn’t worked for me, i have .gifs on my product images, i would like to see the animtion in my product archive but it is only being shown in the single product page on hover, i think it could be solved by making wordpress not to re zize images, as I have read that delete the animation.. but i don’t know how to code so I’m stuckd