How to Use Animated GIFs as WordPress Featured Images

How to Use Animated GIFs as WordPress Featured Images

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.

$thumb_url = get_the_post_thumbnail_url();
$thumb_low = strtolower($thumb_url);
if (strpos($thumb_low, '.gif') === false) {
	$thumb_size = 'large';
} else {
	$thumb_size = 'full';
}

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.

Source

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this:
Inline
Inline