Webkul
Services
Technologies Bagisto QloApps
iOS Android SAP BigCommerce Wix
Trusted by
Samsung Intel Toyota Walmart Disney Nokia Nestlé Decathlon
See all customers
Back to Top
DEV

Resize Product Image in Magento 2

Today we are discussing how to resize the product image using a block class in Magento 2.
First, we will create a block class as below:

<?php
namespace Webkul\CustomModule\Block;

class ImageResize extends \Magento\Framework\View\Element\Template
{
    /**
     *
     * @var \Magento\Catalog\Model\ProductRepository
     */
    protected $_productRepository;
    /**
     *
     * @var \Magento\Catalog\Helper\Image
     */
    protected $_productImageHelper;
     
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Catalog\Model\ProductRepository $productRepository
     * @param \Magento\Catalog\Helper\Image $productImageHelper
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,        
        \Magento\Catalog\Model\ProductRepository $productRepository,
        \Magento\Catalog\Helper\Image $productImageHelper,
        array $data = []
    )
    {
        $this->_productRepository = $productRepository;
        $this->_productImageHelper = $productImageHelper;
        parent::__construct($context, $data);
    }

    /**
     * resize of the image
     * @see \Magento\Catalog\Model\Product\Image
     * @param int $width
     * @param int $height
     * @return $this
     */
    public function resizeImage($id, $image_type, $width, $height = null)
    {
        $product = $this->_productRepository->getById($id);
        $resizedImage = $this->_productImageHelper->init($product, $image_type)
                                           ->constrainOnly(TRUE)
                                           ->keepAspectRatio(TRUE)
                                           ->keepTransparency(TRUE)
                                           ->keepFrame(FALSE)
                                           ->resize($width, $height);
        return $resizedImage;
    }
}

Here, $_productRepository is an object of Magento\Catalog\Model\ProductRepository class and $_productImageHelper is an object of Magento\Catalog\Helper\Image class.

In the Function resizeImage, there are four parameters $id which is the id of the product, $image_type which can be “product_base_image” or “product_small_image”, “product_thumbnail_image” and $width, $height is the width and height of the image respectively.

constrainOnly-> By default it is False. but if we set True that means the image will not be bigger than it was.
keepAspectRatio-> By default it is True, which means image height and width will not be contorted.
keepFrame-> keepFrame(False) will remove the background and set the image to the desired width/height.
keepTransparency-> By default, it is True, which means the image will not lose transparency.

Next, we will use that image in the corresponding template pthml file as below:

<?php
//Product ID
$id = 1;

$width = 250;
$height = 400;

$resizedImageUrl = $block->resizeImage($id, 'product_base_image', $width, $height)->getUrl();
?>
<img src="<?php echo $resizedImageUrl;?>" alt="Alt Text"/>

Hope it will help you. Thank you.

. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home