Magento 2:调整图片大小

本文介绍了如何在Magento 2中调整产品图像的大小。在此示例中,我们将通过id或sku加载产品,然后调整其图像的大小。我们还将注入Catalog Helper Image类的对象以调整图像大小。

要加载产品,我们将使用Magento 2的服务层执行此任务。Magento强烈鼓励使用服务层。

下面是我的自定义模块(Chapagain_HelloWorld)的块类。我在模块的块类的构造函数中注入了\ Magento \ Catalog \ Model \ ProductRepository\ Magento \ Catalog \ Helper \ Image类的对象。

app / code / Chapagain / HelloWorld / Block / HelloWorld.php

<?php
namespace Chapagain\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{    
    protected $_productRepository;
    protected $_productImageHelper;
        
    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);
    }
    
    public function getProductById($id)
    {
        return $this->_productRepository->getById($id);
    }
    
    public function getProductBySku($sku)
    {
        return $this->_productRepository->get($sku);
    }
    
    /**
     * Schedule resize of the image
     * $width *or* $height can be null - in this case, lacking dimension will be calculated.
     *
     * @see \Magento\Catalog\Model\Product\Image
     * @param int $width
     * @param int $height
     * @return $this
     */
    public function resizeImage($product, $imageId, $width, $height = null)
    {
        $resizedImage = $this->_productImageHelper->init($product, $imageId)
                                           ->constrainOnly(TRUE)
                                           ->keepAspectRatio(TRUE)
                                           ->keepTransparency(TRUE)
                                           ->keepFrame(FALSE)
                                           ->resize($width, $height);
        return $resizedImage;
    }    
}
?>

我们将产品基础图像调整为一定的高度和宽度。我们将图像约束,宽高比和透明度保持为TRUE。keepFrame设置为false。

constrainOnly:保证图片的大小不会比实际的大。默认情况下为false。

keepAspectRatio:保证图像图片的宽度/高度不会失真。默认情况下为true。

keepTransparency:保证,该图像将不会失去透明度(如果有的话)。默认情况下为true。

keepFrame:确保图片的尺寸设置为$ width / $ height。如果keepAspectRatio(false),则不适用。

现在,我们将产品加载到模板文件中。然后,我们调整产品图像的大小,然后显示它。在下面的示例中,我们将其用作product_base_image图像ID。如果需要product_small_image,我们还可以使用其他ID,如,product_thumbnail_image等等。

<?php
$id = YOUR_PRODUCT_ID;
$_product = $block->getProductById($id);
// $sku = 'YOUR_PRODUCT_SKU';
// $_product = $block->getProductBySku($sku);
 
$imageId = 'product_base_image';
$width = 200;
$height = 300;
 
$resizedImageUrl = $block->resizeImage($product, 'product_base_image', $width, $height)->getUrl();
?>
<img src="$resizedImageUrl" alt="product image" />

在模板文件中直接调整产品图像的大小

在上面的示例中,我在自定义的HelloWorld块中注入了产品存储库和图像帮助器类。您也可以直接在模板(.phtml)文件中使用它。这样做的方法如下:

打开模板文件并编写以下代码:

<?php
$id = YOUR_PRODUCT_ID;
$_product = $block->getProductById($id);
// $sku = 'YOUR_PRODUCT_SKU';
// $_product = $block->getProductBySku($sku);
 
$imageId = 'product_base_image';
$width = 200;
$height = 300;
 
$resizedImageUrl = $_imageHelper->init($product, $imageId)
                                ->constrainOnly(TRUE)
                                ->keepAspectRatio(TRUE)
                                ->keepTransparency(TRUE)
                                ->keepFrame(FALSE)
                                ->resize($width, $height)
                                ->getUrl();
?>
<img src="$resizedImageUrl" alt="product image" />

希望这可以帮助。谢谢。

赞(0)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

版权属于: sbboke版权所有。

转载时必须以链接形式注明作者和原始出处及本声明。

张贴在magento2教程标签:

相关文章

0 0 投票数
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论