How to Resize an Image in Your Custom Magento 2 Module

Resizing images in a custom Magento 2 module is straightforward once you know the right classes to use. We rely on the Filesystem class for accessing the file system and the Image\AdapterFactory class for handling image manipulation.

Step-by-Step Guide to Resize Images

To begin, you’ll need to create a method for resizing the image in your block or helper class. Here's an example where the method is created within the block:

protected $_filesystem;

protected $_imageFactory;

public function __construct(

\Magento\Framework\Filesystem $filesystem,

\Magento\Framework\Image\AdapterFactory $imageFactory

) {

$this->_filesystem = $filesystem;

$this->_imageFactory = $imageFactory;

}

public function resize($image, $width = null, $height = null)

{

$absolutePath = $this->_filesystem-> getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)

->getAbsolutePath('helloworld/images/') . $image;

$imageResized = $this->_filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA)

->getAbsolutePath('resized/' . $width . '/') . $image;

$imageResize = $this->_imageFactory->create();

$imageResize->open($absolutePath);

$imageResize->constrainOnly(true);

$imageResize->keepTransparency(true);

$imageResize->keepFrame(false);

$imageResize->keepAspectRatio(true);

$imageResize->resize($width, $height);

$destination = $imageResized;

$imageResize->save($destination);

$resizedURL = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'resized/' . $width . '/' . $image;

return $resizedURL;

}

Calling the Resize Method in PHTML

Once the method is in place, you can easily call it from your .phtml file:

$block->resize('test.jpg', 500, 400);

Key Details to Keep in Mind

• Filesystem Handling: The Filesystem class is crucial for obtaining the absolute path of images stored in the media directory. It ensures you work with the correct file path.
• Image Resizing: The Image\AdapterFactory is used to resize the image, maintaining aspects like transparency and aspect ratio. You can specify the width and height, and the image will be resized accordingly.
• Resized Image Location: The resized image is saved in the resized/ folder and can be accessed via a URL, which is returned after the image is processed.

Summary of the Process

By following these steps, you can resize images effectively in your custom Magento 2 module. This method is both flexible and efficient for managing image sizes in various parts of your store.