Magento 2 - GIF Images , Animation is not working on frontend

Question

I am trying to upload .gif image for few products , image is uploading from admin panel successfully

and animation also working in admin panel.

But issue here is when i am checking this product on frontend - image is displayed but Animation is not working on frontend

I have also check same issue on github - https://github.com/magento/magento2/issues/8015

But unable to find any solution.

Answer 1

So finally i got the solution for the same ,and resolved the issue

looking at the code i found that magento encoding image path in md5 string as well

if you have seen path on product detail page it is like - catalog/product/cache/image/700x560/e9c3970ab036de70892d86c6d221abfe/m/b/

so here i have override the model Image.php in my custom module and for specifically GIF image i have removed that md5 encryption code and call image path directly.

Below is the code :

di.xml

<?xml version="1.0"?>    
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Model\Product\Image" type="ProductAjax\Animation\Model\Image" />
</config>

image.php - overrided function setBaseFile.

public function setBaseFile($file)
    {
        $this->_isBaseFilePlaceholder = false;

        if ($file && 0 !== strpos($file, '/', 0)) {
            $file = '/' . $file;
        }
        $baseDir = $this->_catalogProductMediaConfig->getBaseMediaPath();

        if ('/no_selection' == $file) {
            $file = null;
        }
        if ($file) {
            if (!$this->_fileExists($baseDir . $file) || !$this->_checkMemory($baseDir . $file)) {
                $file = null;
            }
        }
        if (!$file) {
            $this->_isBaseFilePlaceholder = true;
            // check if placeholder defined in config
            $isConfigPlaceholder = $this->_scopeConfig->getValue(
                "catalog/placeholder/{$this->getDestinationSubdir()}_placeholder",
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
            );
            $configPlaceholder = '/placeholder/' . $isConfigPlaceholder;
            if (!empty($isConfigPlaceholder) && $this->_fileExists($baseDir . $configPlaceholder)) {
                $file = $configPlaceholder;
            } else {
                $this->_newFile = true;
                return $this;
            }
        }

        $baseFile = $baseDir . $file;

        if (!$file || !$this->_mediaDirectory->isFile($baseFile)) {
            throw new \Exception(__('We can\'t find the image file.'));
        }

        $this->_baseFile = $baseFile;
        $test_extension = substr($file,strpos($file, ".") + 1); 
            if($test_extension == "gif" || $test_extension == "GIF")
            {
                $path [] = $this->_catalogProductMediaConfig->getBaseMediaPath();
            }
            else
            {
                // build new filename (most important params)
                $path = [
                    $this->_catalogProductMediaConfig->getBaseMediaPath(),
                    'cache',
                    $this->getDestinationSubdir(),
                ];
                if (!empty($this->_width) || !empty($this->_height)) {
                    $path[] = "{$this->_width}x{$this->_height}";
                }

                // add misk params as a hash
                $miscParams = [
                    ($this->_keepAspectRatio ? '' : 'non') . 'proportional',
                    ($this->_keepFrame ? '' : 'no') . 'frame',
                    ($this->_keepTransparency ? '' : 'no') . 'transparency',
                    ($this->_constrainOnly ? 'do' : 'not') . 'constrainonly',
                    $this->_rgbToString($this->_backgroundColor),
                    'angle' . $this->_angle,
                    'quality' . $this->_quality,
                ];

                // if has watermark add watermark params to hash
                if ($this->getWatermarkFile()) {
                    $miscParams[] = $this->getWatermarkFile();
                    $miscParams[] = $this->getWatermarkImageOpacity();
                    $miscParams[] = $this->getWatermarkPosition();
                    $miscParams[] = $this->getWatermarkWidth();
                    $miscParams[] = $this->getWatermarkHeight();
                }

                $path[] = md5(implode('_', $miscParams));
            }
        // append prepared filename
        $this->_newFile = implode('/', $path) . $file;
        // the $file contains heading slash

        return $this;
    }

Hope it helps :)

Answer 2

A correction here. If you use above script in image.php, GIF will start working no doubt, but i check is that after that user is not able to upload jpeg or png anymore. Below is that updated version of it with bug fix. I know its late, but hope it helps.

public function setBaseFile($file)
    {
        $this->_isBaseFilePlaceholder = false;

        if ($file && 0 !== strpos($file, '/', 0)) {
            $file = '/' . $file;
        }
        $baseDir = $this->_catalogProductMediaConfig->getBaseMediaPath();

        if ('/no_selection' == $file) {
            $file = null;
        }
        if ($file) {
            if (!$this->_fileExists($baseDir . $file) || !$this->_checkMemory($baseDir . $file)) {
                $file = null;
            }
        }
        if (!$file) {
            $this->_isBaseFilePlaceholder = true;
            // check if placeholder defined in config
            $isConfigPlaceholder = $this->_scopeConfig->getValue(
                "catalog/placeholder/{$this->getDestinationSubdir()}_placeholder",
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
            );
            $configPlaceholder = '/placeholder/' . $isConfigPlaceholder;
            if (!empty($isConfigPlaceholder) && $this->_fileExists($baseDir . $configPlaceholder)) {
                $file = $configPlaceholder;
            } else {
                $this->_newFile = true;
                return $this;
            }
        }

        $baseFile = $baseDir . $file;

        if (!$file || !$this->_mediaDirectory->isFile($baseFile)) {
            throw new \Exception(__('We can\'t find the image file.'));
        }

        $this->_baseFile = $baseFile;
        $test_extension = substr($file,strpos($file, ".") + 1); 
            if($test_extension == "gif" || $test_extension == "GIF")
            {
                $path [] = $this->_catalogProductMediaConfig->getBaseMediaPath();
            }
            else
            {
                // build new filename (most important params)
                $path = [
                    $this->_catalogProductMediaConfig->getBaseMediaPath(),
                    'cache',
                    $this->getDestinationSubdir(),
                ];
             }
                if (!empty($this->_width) || !empty($this->_height)) {
                    $path[] = "{$this->_width}x{$this->_height}";
                }

                // add misk params as a hash
                $miscParams = [
                    ($this->_keepAspectRatio ? '' : 'non') . 'proportional',
                    ($this->_keepFrame ? '' : 'no') . 'frame',
                    ($this->_keepTransparency ? '' : 'no') . 'transparency',
                    ($this->_constrainOnly ? 'do' : 'not') . 'constrainonly',
                    $this->_rgbToString($this->_backgroundColor),
                    'angle' . $this->_angle,
                    'quality' . $this->_quality,
                ];

                // if has watermark add watermark params to hash
                if ($this->getWatermarkFile()) {
                    $miscParams[] = $this->getWatermarkFile();
                    $miscParams[] = $this->getWatermarkImageOpacity();
                    $miscParams[] = $this->getWatermarkPosition();
                    $miscParams[] = $this->getWatermarkWidth();
                    $miscParams[] = $this->getWatermarkHeight();
                }

                $path[] = md5(implode('_', $miscParams));

        // append prepared filename
        $this->_newFile = implode('/', $path) . $file;
        // the $file contains heading slash

        return $this;
    }

Answer 3

I have same issue and solved by @olivianicholls on Github

Rewrite Image.php in Magento\Catalog\Model\View\Asset

public function getUrl()
    {
        return $this->context->getBaseUrl() . DIRECTORY_SEPARATOR . $this->getImageInfo();
    }

to

public function getUrl()
    {
        $file = $this->getFilePath();
        $pathEnding = substr($file, strpos($file, ".") + 1); 
        if ($pathEnding == "gif" || $pathEnding == "GIF") {
            $path = substr($file, strpos($file, "/") + 1);
            return $this->context->getBaseUrl() . DIRECTORY_SEPARATOR . $path;
        } else {
            return $this->context->getBaseUrl() . DIRECTORY_SEPARATOR . $this->getImageInfo();
        }
    }

Wish it's help for you.