Animated gif not showing up on the frontend as animated

[gregorske]

New Admin of a magento 2 store here. 

My client wants to put animated gifs of the product instead of youtube videos on the product pages. I've googled and have found these two ways, but is there a more elegant solution? I don't even know if they work, but that's what I found. I would have to imagine that Magento 2.1.7 supports or can handle animated gifs on the frontend. 

1) Hosted at Giphy

2) Hosted locally but called using a web address. 

Many thanks!

[manusia_bayangan]

edit file on -> .\vendor\magento\module-catalog\Model\View\Asset\Image.php

on function getAbsolutePath($result) and  private function getRelativePath($result)

 check are file contain .gif or not?
if true then dont use cache image, if false use cache image.

=======================================

if (strpos( $this->getFilePath(), '.gif') !== false) {

$result = $this->join($result, $this->getFilePath());

}

else{

$result = $this->join($result, $this->getModule());

$result = $this->join($result, $this->getMiscPath());

$result = $this->join($result, $this->getFilePath());

}

 ====================

[Manthan Dave]

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") // here is the code for gif images
            {
                $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 !!

if issue solved, Click kudos/Accept as solutions.