how to resize image in magento 2

Why we need to resize the image when we can overwrite original images?

When a developer works on custom modules having images, he/she would want to fetch products or category images. They may face problems with image being displayed in different sizes on the frontend. This situation can be resolved in two ways: First is using CSS but this is not advisable. Second option is resizing the actual image and save it to the cache folder.

What are the benefits of resizing the actual image file instead of using CSS to resize them in HTML?

If there is a huge difference in the source and target image sizes, the default resizing utility offered by CSS cannot be used. One can resize the entire image or retain only its central part to achieve the desired results.

How to resize the actual image in Magento 2?

In this blog, I am going to explain how to save resized image to a cache folder and every time it returns the image when requested and it won’t overwrite the original image.

For instance, you’ve added 400*300 sized image for a product category and you want that particular category to be displayed on home page with a size 256*180. It may not be a viable solution to resize the original file each time. Hence, designer would add the resized image that is 256*180 in the cache folder. Each time when request is sent, it returns the image from cache. One can call it from any class, template, or block.

Step 1: You need to create helper class file Image.php at Vender\Module\Helper\Image.php and the past below code.


< ?php
namespace Vender\Module\Helper;
use Magento\Framework\Filesystem;
use Magento\Framework\Url;
use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Framework\App\Filesystem\DirectoryList;
class Image extends \Magento\Framework\App\Helper\AbstractHelper {
    protected $scopeConfig;
    protected $storeManager;
    protected $messageManager;
    protected $_response;
    protected $_resourceConfig;
    protected $_responseFactory;
    protected $_url;
    protected $_filesystem;
    protected $_directory;
    protected $_imageFactory;
    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\Message\ManagerInterface $messageManager,
        \Magento\Framework\App\ResponseInterface $response,
        \Magento\Framework\App\Config\Storage\WriterInterface $resourceConfig,
        \Magento\Framework\App\ResponseFactory $responseFactory,
        \Magento\Framework\UrlInterface $url,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\Framework\Image\AdapterFactory $imageFactory
    )
    {
        $this->scopeConfig = $scopeConfig;
        $this->_storeManager=$storeManager;
        $this->messageManager=$messageManager;
        $this->_response=$response;
        $this->_resourceConfig=$resourceConfig;
         $this->_responseFactory = $responseFactory;
        $this->_url = $url;
        $this->_filesystem = $filesystem;
        $this->_directory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
        $this->_imageFactory = $imageFactory;
    }
    public function imageResize(
    $src,
    $width=35,
    $height=35,
    $dir='resized/'
    ){
        $absPath = $this->_filesystem
        ->getDirectoryRead(DirectoryList::MEDIA)
        ->getAbsolutePath().$src;
        $imageResized = $this->_filesystem
        ->getDirectoryRead(DirectoryList::MEDIA)
        ->getAbsolutePath($dir).
        $this->getNewDirectoryImage($src);
        $imageResize = $this->_imageFactory->create(); 
        $imageResize->open($absPath);
        $imageResize->backgroundColor([255, 255, 255]);
        $imageResize->constrainOnly(TRUE);
        $imageResize->keepTransparency(TRUE);
        $imageResize->keepFrame(true);
        $imageResize->keepAspectRatio(true);
        $imageResize->resize($width,$height);
        $dest = $imageResized ;
        $imageResize->save($dest);
        $resizedURL= $this->_storeManager->getStore()
        ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).
        $dir.$this->getNewDirectoryImage($src);
        return $resizedURL;
    }
    public function getNewDirectoryImage($src){
        $segments = array_reverse(explode('/',$src));
        $first_dir = substr($segments[0],0,1);
        $second_dir = substr($segments[0],1,1);
        return 'cache/'.$first_dir.'/'.$second_dir.'/'.$segments[0];
    }
}

Step 2: Using below code you can call above imageResize() method from any class, block or template.


$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$imgpath = $objectManager->create('Vender\Module\Helper\Image')->imageResize('IMAGE_PATH','50','50','YOUR_DIR_NAME/');

Here you got the output as 50×50 Resize image.

Now I am going to explain the methods I have used

1. getDirectoryRead() :While building your custom extension, you will usually need a path to your extension’s files. However, sometimes you will need to get a root folder or maybe to media folder.

2. getAbsolutePath() :here you will be able to get the absolute path to save cache. We have to pass folder name in the parameter.

3. backgroundColor():used to set background color

4. constrainOnly():
->constrainOnly(true): This will not resize an image that is smaller than the dimensions inside the resize() part. The default value is true in Magento 2

->constrainOnly(false): This will resize an image that is smaller than the dimensions inside the resize() part

5. keepTransparency(): By default it is True, that means the image will not lose transparency.

6. keepFrame():
->keepFrame(true): Properly remove white image frame upon resizing photos in Magento

->keepFrame(false): Properly doesn’t remove white image frame upon resizing photos in Magento

7. keepAspectRatio():
->keepAspectRatio(true): It maintains the ratio. if a graphic has an aspect ratio of 2:1, it means that the width is twice as large as the height. When resizing graphics, it is important to maintain the aspect ratio

->keepAspectRatio(false): It doesn’t maintain the ratio.

i-Verve is a Magento development company that deploys online stores to this popular e-commerce platform in the best way.

Post Comment

Your email address will not be published. Required fields are marked *

Please type your comment