Orsdxy

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.

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="MagentoCatalogModelProductImage" type="ProductAjaxAnimationModelImage" />

</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",

                MagentoStoreModelScopeInterface::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 :)

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",

                MagentoStoreModelScopeInterface::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;

    }