Learn WordPress 
GIF is short for Graphics Interchange Format. Animated pictures with a lot of use cases. Using GIF on a website increases the audience interaction and makes the content more appealing. Is using GIF limited to text? Have you thought about using GIF as a featured image in WordPress?
So, is GIF only usable within the text? The answer is no. Not only you can use GIF in a text, but you can also use it as a featured image and thumbnail in WordPress.
In this article, we are going to discuss how to use GIF as a featured image in WordPress.
How to Use GIF as a Featured Image in WordPress?
As mentioned above, using GIFs has many advantages. It attracts more traffic and user interaction. Using GIF is also very important for tutorials. Because the process is visible to users and they don’t feel astray.
But we’re talking about how to add GIF as a featured image in WordPress. Generally, using GIFs in WordPress is like uploading a picture. Upload GIF images in WordPress and use them as a featured image. To upload GIF in WordPress, follow the steps below:
- Login to WordPress Dashboard
- Create a new post or edit one of your older posts
- To add GIF, click on Add Media from the toolbar
- Then, from the gallery choose the GIF image or upload it from your computer
- Click on Add to Post
This step is for the classic editor in WordPress. In Gutenberg, it’s a bit different. To add GIF to WordPress with Gutenberg editor follow the steps below:
- Login to WordPress Dashboard
- Create a new post or edit one of your older posts
- Click on the Image block
- Choose the .gif image
- Make sure the image is in full size
Finally, save your changes.
How to Fix GIF not Animating in WordPress?
GIF images have many advantages. However, sometimes they cause a lot of issues for the users as well. One of the issues GIF images cause is its animation not working. We have added GIF images to WordPress for their animation aspect. If they’re not moving then what’s the difference between a normal image?
Usually, issues are caused by the dimension. Generally, when you upload GIF to WordPress it processes them into three different sizes, besides the original size. While this is okay for normal images but WordPress cannot process GIF properly. Thus, stops the animation.
This results in WordPress only grabbing one of the frames and it no longer will animate.
However, the fix is very simple and it’s not as complex as the issue itself. WordPress displays GIF images fine only if they’re set to Full size. Meaning, WordPress shouldn’t process the GIF into other sizes.
The best possible solution is to resize the GIF before uploading it to WordPress. In some themes if the uploaded GIF doesn’t have the proper size, it won’t be displayed as animation, it will be displayed as a normal static image.
Thus, resizing GIF or not using the proper size can cause GIF images to stop moving.
There are two methods if you want to use GIF featured images in WordPress without any issues. One of them is by installing the right plugin and the other method is by getting your hands dirty with codes.
Add GIF Featured Image to WordPress using a Plugin
If you are going to use a GIF featured image in WordPress with a plugin, we recommend using the Autoset Featured Image plugin. This is one of the most popular plugins to add GIF to WordPress.
The way it works is very simple and precise. The user uploads the GIF image with the right size to WordPress. Then the plugin fetches the uploaded GIF and uses it as a featured image. The only disadvantage of this plugin is the fact that you have to use the featured image in the post as well.
Don’t worry, there is another method to fix GIF images not animating. It’s by using a code.
How to Fix GIF not Animating with Code?
When you upload an image to WordPress as a featured image, it will be processed by WordPress and it resizes the GIF. Therefore, the GIF image will lose its ability to move. But there is a way to use GIF featured images in WordPress.
<?php $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';
} ?>This code receives the GIF URL (make sure the URL is in lowercase) then it checks if there are any GIF in the URL or not.
If there is, then we resize the thumbnail to large so that the image won’t lose its functionality.
Finally, we have to tell this code to use the size we have defined for the thumbnail in the post.
the_post_thumbnail() the code should be like the following:
the_post_thumbnail($thumb_size)