Contents
Why did 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 images 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. The second option is resizing the actual image and save it to the cache folder. We can resize the custom image in Magento 2 by simply coding the snippet. Many times we need to resize images in Magento 2 for a custom module or like category images.
For Image resize, we need to create the Helper file under the module and called function under the template file.
Step 1: Create helper class file Image.php follow the link.
Magepow/ResizeImage/Helper/Image.php
<?php
namespace Vendor\Namespace\Helper;
use Magento\Framework\App\Filesystem\DirectoryList;
class Image extends \Magento\Framework\App\Helper\AbstractHelper
{
/**
* Custom directory relative to the "media" folder
*/
const DIRECTORY = 'custom_module/posts';
/**
* @var \Magento\Framework\Filesystem\Directory\WriteInterface
*/
protected $_mediaDirectory;
/**
* @var \Magento\Framework\Image\Factory
*/
protected $_imageFactory;
/**
* Store manager
*
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $_storeManager;
/**
* @param \Magento\Framework\App\Helper\Context $context
* @param \Magento\Framework\Filesystem $filesystem
* @param \Magento\Framework\Image\Factory $imageFactory
* @param \Magento\Store\Model\StoreManagerInterface $storeManager
*/
public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\Filesystem $filesystem,
\Magento\Framework\Image\AdapterFactory $imageFactory,
\Magento\Store\Model\StoreManagerInterface $storeManager
) {
$this->_mediaDirectory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
$this->_imageFactory = $imageFactory;
$this->_storeManager = $storeManager;
parent::__construct($context);
}
/**
* First check this file on FS
*
* @param string $filename
* @return bool
*/
protected function _fileExists($filename)
{
if ($this->_mediaDirectory->isFile($filename)) {
return true;
}
return false;
}
/**
* Resize image
* @return string
*/
public function resize($image, $width = null, $height = null)
{
$mediaFolder = self::DIRECTORY;
$path = $mediaFolder . '/cache';
if ($width !== null) {
$path .= '/' . $width . 'x';
if ($height !== null) {
$path .= $height ;
}
}
$absolutePath = $this->_mediaDirectory->getAbsolutePath($mediaFolder) . $image;
$imageResized = $this->_mediaDirectory->getAbsolutePath($path) . $image;
if (!$this->_fileExists($path . $image)) {
$imageFactory = $this->_imageFactory->create();
$imageFactory->open($absolutePath);
$imageFactory->constrainOnly(true);
$imageFactory->keepTransparency(true);
$imageFactory->keepFrame(true);
$imageFactory->keepAspectRatio(true);
$imageFactory->resize($width, $height);
$imageFactory->save($imageResized);
}
return $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . $path . $image;
}
}1. constrainOnly(): This will not resize an image that is smaller than the dimensions inside the resize() part. The default value is true in Magento 2.
2. keepTransparency(): By default, it is True, which means the image will not lose transparency.
3. keepFrame(): Choose (True) will remove the background and set the image to desired width/height and choose (false) will doesn’t remove.
4: keepAspectRatio(true): It the aspect ratio of the frame, for example, if the frame is 360: 240, the aspect ratio is 3: 2, if there is a change, it will not change the aspect ratio when resizing graphics, keepAspectRadio (false) It will doesn’t maintain the ratio.
Step 2: Called from Template file.
<?php
$image = $this->helper('Magepow\ResizeImage\Helper\Image');
?>
<!-- Resize the image by specifying width only -->
<img src="<?php echo $image->resize('/my-image.jpg', 600); ?>">
<!-- Resize the image by specifying width and height -->
<img src="<?php echo $image->resize('/my-image.jpg', 240, 240); ?>">Here to the frame is 240×240 and a image have width only 600.
Hope this article will help you in some way, You can see useful articles in the next articles.
Anything you need support from Magento 2 feels free to contact us at Magepow and
Phone: (+84)865633728