Magento 2 - GIF Images , Animation is not working on frontend
-
16-04-2021 - |
سؤال
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="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 :)
نصائح أخرى
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;
}
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.