Animated GIF not working on WordPress

How to Upload animated gifs into WordPress

If you created and saved the animated GIF on your computer, you may upload it online. Click “Media,” followed by “Add new in WordPress,” and go to the file. After locating the file, click Upload. However, you may publish the WordPress gif directly if you acquired it from a website. What should one do? Then, locate the gif you want to use. Keep in mind that the URL of the page that contains the animated gif may differ from the URL of the animated gif itself. Open the gif in a new tab or use the inspect function of your browser to obtain the URL. Locate the link on GIPHY and choose “Copy Link.” Now select the file you want to use. Copy the URL for the animated GIF file.

Open the GIF in your browser and copy the URL. Select “Media” followed by “Add New” on your WordPress website. If the animation file is not local, you will be unable to locate it by searching your computer. Therefore, the URL should be included in the “File name” field. Select “Open”. Now a GIF image should upload to your WordPress site. Locate the gif in your media library and click on it to open it in a new tab. It should be appropriately animated. Using the animated gif as the company’s logo. After uploading the animated GIF, navigate to the settings section of your website and choose it from your media library. In general, you should encounter no problems. However, CSS will allow you to appropriately resize the logo. CSS will not destroy the animation because it has no effect on the original. It will only do harm to your site. Find the logo’s class and ID on the page to resize it. Adjust the dimensions.

Reason GIF’s Not Working in WordPreess – Step by Step Ultimate Guide

If you have ever used GIFs in your postings, you may have encountered a problem where the GIF would not play. The GIF was submitted correctly to the website, but it does not move. The issue can be rather aggravating, but the remedy is straightforward. The reason why your GIF is not functioning in WordPress is that WordPress resizes GIFs upon upload. Depending on your WordPress theme, each image or GIF you post to your website is scaled into a number of different dimensions.

In such situations, your GIFs are also scaled. And when GIFs are scaled in WordPress, they become non-animated due to the destruction of their animation attributes. So, how do you resolve this issue? To prevent your GIF from resizing, you would need to modify your WordPress theme. However, that is not the proper approach to such a straightforward issue. Here’s how to solve non-functioning GIFs in WordPress.

Animated GIFs frequently do not function with WordPress. Animated GIFs are not always shown appropriately. So even if the initial size of an animated GIF looks to be fine. After publishing, your animations may stop operating and a static image appears. Your WordPress website’s file size limits may apply to large image files. Some WordPress themes disable pictures greater than 10MB. WordPress themes automatically resize animated GIF images for an improved look, but the animation is lost in the process. Plugins for image optimization are similar. In this case, the theme will not raise the size of a gif that is smaller than the frame templates. This will improve the look of your website.

In certain cases, shrinking a large picture may change its characteristics, preventing it from animating properly on your website. The animated GIFs don’t just fail due to theme issues. They may also fail due to server issues or browser settings. If you haven’t already, set your web browser to correctly view animated GIFs. Some web browsers, including Chrome and Firefox, will not show animated GIFs correctly unless specific parameters are enabled. Slow web hosting companies might potentially impede the display of animated GIFs.

Display difficulties particular to mobile devices

Large picture file sizes may be the cause of animation failure on mobile devices, especially on low-powered mobile devices. Due to the fact that animated GIFs are a collection of separate still images, download sizes can grow rapidly. Always keep the resolution as low as possible for optimum results. Whether utilising a mobile device or a desktop computer, you must avoid huge animated files. Ensure that the width of the gifs is less than the whole width of the live event. You may reduce file size by combining still and moving components. For example, a single complete frame can be used to keep the background static. Then, overlay the little frames on the background of the animation.

Even though this will require additional effort, it will reduce the file size, and as a consequence, the animated GIF will function after being posted. You should manually resize animated GIFs rather than waiting for the theme to do so. Using complex tools such as gif reconstructors such as Ezgif.com might help eliminate the animations. Some resizers reduce the attributes of your animated GIFs, requiring you to recreate the GIF. In addition, you will need to alter the appearance of your animated GIF so that it appears optimally on a tiny scale. GIF animation example

Troubleshooting – Animated GIF’s

Frequently, the most prevalent issue is the scaling of plugins or themes. While utilising imagify, an image optimisation plugin that resizes photos for faster page loading, we encountered this issue. We resolved this issue by editing our post to display the image as a complete image rather than a compressed one. Similarly, themes might frequently make your image half the size of the original; thus, you should click your image to ensure that it is displayed as a full image and not as a large, medium, or tiny image. You might also try uploading the original GIF to a website that hosts images, such as Photobucket or ThingLink. Incorporate the frame code into the post. This prevents your theme from resizing the picture.

Top Reasons  – Why Animated GIF’s Not Showing in WordPress

GIF as Featured Image

Similar to animated GIFs in articles, angry WordPress users publish GIFs as featured pictures in posts, only to realise that they do not move. The reason for this is because themes that allow featured pictures utilise a specifically downsized version of images called thumbnail, which is not similar to the thumbnail sizes that can be specified in Settings->Media. By default, featured photos utilise this scaled “thumbnail.” Similar to GIFs in posts, when a scaled version of the GIF is retrieved to serve as a featured picture, it is destroyed and becomes a static frame, so it cannot be animated. There is a technique to make animated GIFs function in WordPress articles and as featured photos.

How to Make WordPress Animated GIFs Work in a Post

If you wish to utilise a GIF in a post, simply follow these steps:

• When producing an animated GIF for usage in WordPress, ensure that it is the precise size (height and width) required for the page. If you wish to fill a 400x250px space, this is the GIF size you should select.
• Upload the GIF normally
• Be careful to select the Full Size option when placing the GIF on the website. WordPress will undoubtedly generate various scaled GIFs, however you should be aware that they cannot be utilised as animated GIFs.

GIF as Featured Image

If you want to use animated GIFs as featured images on your website, you can either use a plugin or adjust the code. If you use a plugin, you may trust Autoset Featured Image. Even though the plugin hasn’t been updated in almost three years, it still has over 9000 active instals. The plugin obtains the animated GIF as the first (full-sized) photo in the post and sets it as the featured image. However, the GIF must be on the page and cannot be used as a featured image. Without plugins, you must edit the WordPress core code.

The post thumbnail function is located in wp-includes/post-thumbnail-template.php at the server’s root. Then, change the value between the parenthesis to ‘full’ to display full-size photographs instead of thumbnails: post thumbnail(); Remember to save the file, re-upload it to the server, and check that the animated GIFs used as featured photos are playing. If not, you probably made a mistake when editing the file; go back and fix it. The offered method is an easy solution for the issue of using animated GIFs as featured photographs, however it will be overridden when WordPress is upgraded. So make a backup and reapply the changes to the modified file. In this case, you may simply re-upload the new post-thumbnails.php file and replace the previous one on the server.

Animated GIFs are not supported by WordPress.

Unfortunately, some themes forbid or restrict the use of animated GIFs in logos. There is no way to make your animated GIFs move if this is the case. If animated GIF logos are critical to your website’s success, you’ll need to change its look. Furthermore, the theme may reduce the size of your animated GIFs, perhaps disrupting the animation. Some themes have strict logo size restrictions, and the theme will automatically resize any file you upload to match those criteria. During the resizing process, the animation will be removed. It’s a difficult problem to fix. The only other option is to contact the theme’s creator for assistance. Look for header.php, header-main.php, branding.php, or a similar file in the theme’s files. The writers are allowed to name and organise their theme files whatever they choose, which makes the process more difficult. As a result, your theme file is likely to have a single header.php file or many header-something.php files, as well as a Header subfolder containing various files. If you’re having trouble finding the logo-function file, contact the theme’s designer. They will provide the support required to resolve the animated GIFs problem.

Use header.php

You should look for the logo function in header.php or any other file that contains the logo settings. It should be something like $logo.= presscore get the logo()orget theme mod (custom logo), or something similar (medium). Alternatively, use if(has custom logo()) or the custom logo() ()

Create a child theme for your website

Copy the header.php file to the folder of the child theme. Always remember to preserve the original folder and file structure of your parent theme. The maximum size of the function’s log is increased. If the function does not have a predefined logo size, the entire size can be specified. Remember that the function might reject it. If it is refused, you must contact the theme’s creator for help. They may be able to provide assistance. When it comes to debugging difficulties with animated GIFs, you must rely on the theme’s developer, since they are the only ones who can tell you how the logo design was made without having to examine the entire theme. If they are unable to assist you and you wish to include animated GIFs on your website, you must adjust the theme. There are no external patches or plugins available to assist with scaling issues.

How to make the best WordPress animated GIFs.

WordPress allows animated gifs in logos and website graphics. An animated GIF requires video or picture editing software. Photoshop is a fantastic example. You’ll need photographs to convey a compelling tale. Because each image is only shown for a few seconds, the animations will be better and the objects will move more realistically. Here’s how to make animated GIFs for your WordPress website. On a Windows PC, open Photoshop and select Timeline from the menu bar. Click the button in the screen’s centre on the tab at the bottom.

Optionally create animation frames. Import all photographs used in the animation and set them on the new layer. Make sure the photos fit your WordPress style or brand. WordPress themes that resize animated GIFs deactivate them. Huge gifs can add weight to your website and slow it down. Select “Make Frames from Layers” from the Timeline tab’s hamburger menu. Your timeline now has numerous frames. Each frame has a timer. Using the timer, set the length of each frame. Use the “Forever” option to make your gifs loop.

You can select a number of constraints or continue on indefinitely. The animated gif may be saved by choosing “File > Export”. In the website’s main menu, select “Save.” Before clicking “Save,” select the gif quality. You may compensate for low quality by increasing file size. You may now use animated GIFs with WordPress.

How to create a gif for your WordPress site

You may use animated gifs from the internet on your WordPress site if you lack imagination. Animated gifs are available on several websites, including GIPHY. Copyright problems should be considered when searching for animated gifs. It is feasible to use any gif you discover, however, this may impair your website’s search engine ranking. You may hire a designer to create an animated gif for you or buy the rights to utilise one.

You may also use sophisticated photo search parameters like licencing to find gifs on Google. Keep in mind that Google may not find all licenced photos. To put it another way, you won’t know if you’re ready for free animation unless you try it. Downloading an animated gif without damaging it is challenging. So, to get started, read some tips on how to download efficiently. You may keep them without having to download anything.

Deactivate Image Optimization Plugins

Depending on how you’ve set up your image optimization plugins, every time you upload a GIF, it may get smaller. Whether you upload it through the media uploader in the WordPress browser or the popup image uploader in the Gutenberg or TinyMCE editor, it will be saved. Most image optimization plugins don’t have a rule for.GIF files that says they shouldn’t be used. That means that every time you upload a.GIF file, they will shrink it. They might also change the size, which would make the GIF not load correctly and cause an HTTP error. If you have an image optimization plugin running, turn it off and try uploading the GIF again. After you turn off the plugin, make sure you clear the cache. This should work, because it worked for me. If it didn’t work, try something else.

Disable Images SEO Plugin

It’s possible that many of you are utilising an image SEO plugin. When you upload an image to WordPress and then put it into a blog post, these plugins will automatically insert the alt tags for the picture. These plugins will also attempt to resize and compress graphics in an effort to cut down on the amount of time it takes for your pages to load. Therefore, there is a possibility that the image SEO plugin you are utilising is the source of this problem.

Try submitting the.GIF file again after disabling any image SEO plugins you have installed. Alternately, you can prevent the loss of the alt tags by disabling the image compression options that are contained within the plugin. The famous picture SEO plugin known as SEO image optimizer has an instructional screenshot that can be seen below.SEO image optimizer.

Increase Memory Limit

If you’re using shared hosting, it’s likely that your server doesn’t have a lot of RAM. Because of this, WordPress won’t be able to upload the GIF file. If you want the problem with HTTP to go away as soon as possible, you should raise the limit on how much memory WordPress can use. Copy the PHP code below and paste it into the wp.config.php file of your WordPress installation to raise the RAM limit to 256 MB.

1	define( ‘WP_MEMORY_LIMIT’, ‘256M’ );

You could try to re-upload the GIF file. Most likely, this will solve the problem.

Ask Your Web Host

If none of the aforementioned options worked, there may be an issue with your site hosting. Contact your hosting provider and request that they examine your server. If you are using Nginx servers, restart them. This issue may also occur if uploads are disabled in the php.ini file or if the post maximum size is less than the upload maximum filesize. You should clean your server’s cache if you utilise a managed WordPress hosting provider.

If your server has linked your website to a custom CDN, you must also remove the CDN line cache. If your current web host cannot resolve the issue, you may need to switch to a better one. You should now be able to post GIFs and other image formats with ease to your WordPress blog. Occasionally, the HTTP issue is transitory, and the only solution is to wait a few minutes. An HTTP error might be caused by server updates or other factors, in which case you must wait and try again.

Remove Special Characters From Image File Name

If your image’s name contains special characters such as an inverted comma (“) or a semicolon (;), etc., you will be unable to submit it to WordPress using the media uploader. You must delete special characters from the GIF filename and reupload it. After uploading the GIF picture, you may see a second issue in which WordPress does not play the GIF animation. When you upload a compressed or scaled GIF animation to a post, WordPress will not play it. When you submit a GIF file, WordPress keeps its initial frame as the original picture. As a result, the GIF will not play when you embed it in a blog post. The quickest solution to this issue is to upload the GIF through the WordPress popup media uploader.

• Launch the WordPress editor and create or update a post.
  Click the button atop the editor labelled “Add Media”
  Upload the GIF and select the full-size option prior to including it in the post.

This would restore the GIF image’s motion. I trust you may now post GIFs to your WordPress site. Always clear the cache before attempting to preview an animation. In the comments area below, please share which solution worked for you.

How To Repair A Damaged Animated GIF Within WordPress Gutenberg

Animated gifs, like movies, are image files that loop. In the WordPress block editor, you may enter animated gifs with the file extension.gif as images. Your animated GIF may occasionally show as a single image. This file’s animation and looping are not working. This animated gif issue may be vexing, but the WordPress solution is straightforward.

Add or embed an animated gif in WordPress

First, upload an animated gif to the Media Library using Image in the block editor. Screenshot of Image Upload in WordPress’s Block Editor

 

Fix a Broken Animated Gif in WordPress

Verify that the Image Size setting for your animated GIF is Full Size. The animation of the gif will not function if the animated gif size selected is not Full Size. Animated GIFs only function in WordPress when the Image Size is set to Full Size. Once you adjust the Image Size to Full Size, you should begin to see your animated GIF looping. This is a simple method for fixing a broken animated GIF.

If this does not resolve the issue, double-check that your GIF is animated. This may be accomplished by opening your.gif file in your web browser. Navigate to File > Open File in Chrome. If the gif is not animating in the browser window, the problem is with your file, not WordPress’s presentation of the gif file.

Adjust Animated Gif Image Size Settings

After uploading your animated GIF, check the Block settings. Locate the Block settings on the page’s right panel. Select Full Size as the Image Size.

Conclusion – Animated GIF not working on WordPress

Large gifs will almost certainly slow down your website. As a result, you must maintain the size that you wish to display on your website. As a general guideline, the animated gif should be fewer than 500 kilobytes in size. Avoid distracting images in favour of something that is certain to catch the attention of those who visit your website. Because the motions may be disturbing to visitors, they should not be employed in situations where visitors want to focus on the information or more than once in the same spot.