cancel
Showing results for 
Search instead for 
Did you mean: 

Animated gif not showing up on the frontend as animated

Animated gif not showing up on the frontend as animated

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!

 

2 REPLIES

Re: Animated gif not showing up on the frontend as animated

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());
}
 ====================

Re: Animated gif not showing up on the frontend as animated

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.

if issue solved,Click Kudos & Accept as Solution