How to Make Thumbnail of Post Stay Animated

Question

When I upload my post with an animated .gif, the thumbnail generates into a new image and doesn't stay animated. It will stay animated inside the post which is great. It seems to resize the .gif image and convert it into a static image because it generates an image with the sizing at the end of the original file. Is there a code to add or remove that prevents it from generating a new image for the thumbnail so it just resizes down as the gif?

Answer 1

Actually WordPress render uploaded images. So if you upload a animated gif then it will not stay animated. Read this article on how to overcome these issue.

I haven't read it through but as Howdy_McGee said, you will have to use a plugin for that.

Essential WordPress Plugins for Working With Animated GIFs

Answer 2

You can add a filter using add_filter() hook for wp_generate_attachment_metadata to teach Wordpress to resize animated gif images correctly:

/**
 * Filters the generated attachment meta data.
 * @param array $metadata An array of attachment meta data.
 * @param int $attachment_id Current attachment ID.
 * @param string $context Additional context. Can be 'create' when metadata was initially created for new attachment or 'update' when the metadata was updated.
 * @return array
 * @author: gresser 2020-11-26
 */
public function resizeGifs(array $metadata, int $attachment_id, string $context)
{
    if (preg_match('/\.gif$/', $metadata['file'])) {

        foreach ($metadata['sizes'] as $image_site) {

            $file_path_original = wp_upload_dir()['basedir'] .'/'. $metadata['file'];
            $imagick = new Imagick($file_path_original);
            $imagick = $imagick->coalesceImages();

            $width = $image_site['width'];
            $height = $image_site['height'];

            foreach ($imagick as $frame) {
                $frame->cropThumbnailImage($width, $height);
                $imagick->setImagePage($width, $height, 0, 0);
            }
            $imagick = $imagick->deconstructImages();

            $file_path_thump = wp_upload_dir()['path'] .'/'. $image_site['file'];
            $imagick->writeImages($file_path_thump, true);
        }
    }
    return $metadata;
}

Answer 3

To keep the message thumbnail animated, it is common to use the GIF format for the image. You can find a step-by-step guide on the internet on how to achieve this. As for creating a deposit gif from a stock video, I was able to find a good article detailing how to do this. Keep in mind that some platforms may have file size limitations when uploading animated content such as GIFs, so check their guidelines if necessary.