Hello Magento Friends,
Magento 2 is truly one of the amazing E-Commerce platforms, although from time to time, store owners may have to change product images for a much cleaner look. One of the common cases is changing backgrounds for product images. It might prove useful when it comes to branding, seasonal promotions, or just a much cleaner look. Here, we shall discuss how to achieve this.
Steps to Change Product Image Background Color in Magento 2:
Step 1: Create a di.xml file in the given below path.
{{magento_root}}\app\code\Vendor\Extension\etc\di.xml
Then add the following code
<?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="Vendor\Extension\Plugin\Product\ImagePlugin" />
</config>Step 2: Create an ImagePlugin.php in the given below path
{{magento_root}}\Vendor\Extension\Plugin\Product\ImagePlugin.php
Now add the code as given below
<?php
namespace Vendor\Extension\Plugin\Product;
use Magento\Catalog\Model\Product\Image as BaseImage;
use Magento\Catalog\Model\Product\Media\Config as CatalogProductMediaConfig;
use Magento\Catalog\Model\View\Asset\ImageFactory;
use Magento\Catalog\Model\View\Asset\PlaceholderFactory;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\App\ObjectManager;
use Magento\Framework\Data\Collection\AbstractDb;
use Magento\Framework\Exception\FileSystemException;
use Magento\Framework\Filesystem;
use Magento\Framework\Image\Factory as ImageFactoryCore;
use Magento\Framework\Model\Context;
use Magento\Framework\Model\ResourceModel\AbstractResource;
use Magento\Framework\Registry;
use Magento\Framework\Serialize\SerializerInterface;
use Magento\Framework\View\Asset\Repository as AssetRepo;
use Magento\Framework\View\FileSystem as ViewFileSystem;
use Magento\MediaStorage\Helper\File\Storage\Database as CoreFileStorageDatabase;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Catalog\Model\Product\Image\ParamsBuilder;
class ImagePlugin extends BaseImage
{
public const XML_PATH_JPEG_QUALITY = 'system/upload_configuration/jpeg_quality';
protected $_backgroundColor = [255,255,0]; // Here Add your RGB Format Color code
protected $_storeManager;
protected $_catalogProductMediaConfig;
protected $_coreFileStorageDatabase;
protected $_mediaDirectory;
protected $_imageFactory;
protected $_assetRepo;
protected $_viewFileSystem;
protected $_scopeConfig;
protected $viewAssetImageFactory;
protected $viewAssetPlaceholderFactory;
protected $serializer;
protected $paramsBuilder;
public function __construct(
Context $context,
Registry $registry,
StoreManagerInterface $storeManager,
CatalogProductMediaConfig $catalogProductMediaConfig,
CoreFileStorageDatabase $coreFileStorageDatabase,
Filesystem $filesystem,
ImageFactoryCore $imageFactory,
AssetRepo $assetRepo,
ViewFileSystem $viewFileSystem,
ImageFactory $viewAssetImageFactory,
PlaceholderFactory $viewAssetPlaceholderFactory,
ScopeConfigInterface $scopeConfig,
AbstractResource $resource = null,
AbstractDb $resourceCollection = null,
array $data = [],
SerializerInterface $serializer = null,
ParamsBuilder $paramsBuilder = null
) {
parent::__construct($context, $registry,$storeManager, $catalogProductMediaConfig,$coreFileStorageDatabase,$filesystem,$imageFactory,$assetRepo,$viewFileSystem,$viewAssetImageFactory,$viewAssetPlaceholderFactory,$scopeConfig,$resource, $resourceCollection, $data,$serializer,$paramsBuilder);
$this->_mediaDirectory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
$this->serializer = $serializer ?: ObjectManager::getInstance()->get(SerializerInterface::class);
$this->paramsBuilder = $paramsBuilder ?: ObjectManager::getInstance()->get(ParamsBuilder::class);
}
}Output:
Before Changing the Background Color
After Changing the Background Color
Conclusion:
By implementing these steps, you can change the background of product images in Magento 2. This customization upgrades your store’s appearance in favor of branding and good customer experience. Let me know if you have questions here in the comments!
Happy Coding!
Description –
