Làm saoResize image trong magento 2?


Mặt định magento hổ trợ resize hình sản phẩm. Với hình ảnh khác trên website chúng ta rất khó để yêu cầu người quản trị webiste chuyển hết tất cả hình ảnh về đúng kích thước. Đôi khi người quản trị upload 1 tấm ảnh lớn làm website chạy chậm. Việc tự động resize ảnh về đúng kích thước sẻ tiết kiệm rất nhiều thời gian cho người quản trị website và cho cả lập trình viên. Với hình ảnh trong category và custom module chúng ta có sử dụng snippet code dưới đây

Bước 1: Tạo Block


<?php
namespace MibeSoft\ImageResize\Block\;

use Magento\Framework\View\Element\Template;
use Magento\Framework\App\Filesystem\DirectoryList;

class ImageResize extends Template
{
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Framework\Image\AdapterFactory $imageFactory,
        \Magento\Framework\Filesystem $filesystem,
        array $data = []
    ) {
        $this->storeManager = $context->getStoreManager();
        $this->imageFactory = $imageFactory;
        $this->_filesystem = $filesystem;
        $this->_directory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);
        parent::__construct(
            $context,
            $data
        );
    }

    /**
     * @param $imageName string imagename only(abc.jpg)
     * @param $width int
     * @param $height int
     * @return string
     */
    public function getResizeImage($imageName,$width = 258,$height = 200)
    {
        /* Real path of image from directory */
        $realPath = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath('catalog/category/'.$imageName);
        if (!$this->_directory->isFile($realPath) || !$this->_directory->isExist($realPath)) {
            return false;
        }
        /* Target directory path where our resized image will be save */
        $targetDir = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath('resized/'.$width.'x'.$height);
        $pathTargetDir = $this->_directory->getRelativePath($targetDir);
        /* If Directory not available, create it */
        if (!$this->_directory->isExist($pathTargetDir)) {
            $this->_directory->create($pathTargetDir);
        }
        if (!$this->_directory->isExist($pathTargetDir)) {
            return false;
        }

        $image = $this->imageFactory->create();
        $image->open($realPath);
        $image->keepAspectRatio(true);
        $image->resize($width,$height);
        $dest = $targetDir . '/' . pathinfo($realPath, PATHINFO_BASENAME);
        $image->save($dest);
        if ($this->_directory->isFile($this->_directory->getRelativePath($dest))) {
            return $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'resized/'.$width.'x'.$height.'/'.$imageName;
        }
        return false;
    }
}

Sử dụng trong template


<img src="<?php echo $this->getResizeImage('/my-image.jpg', 240, 240); ?>">


Hy vọng bài viết có ích với bạn. Bạn có thể theo dỏi các bài viết tiếp theo dưới đây. Tham khảo module magento 2 webp hổ trợ tự động chuyển hình ảnh sang định dạng webp giúp nén hình ảnh tốt hơn và cải thiện tốc độ website
Mọi thông tin liên hệ tại MibeSoft