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.
Be the first to comment.