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;
}