产品图片大小是很好的属性，对客户来说，可以让产品在详情中展示地更加清晰。因为在线上购物，客户不能真实的触摸产品，只能通过发布的描述和上传的图片来感知产品。图片越漂亮，购物欲望越强烈。
尺寸的标准是需要了解的主要特性之一，本文将会展示如何用特定的指令来实现修改产品图片尺寸以适应页面的大小。
方法一：在块 HelloWorld 中修改产品图片
首先，将展示在块 HelloWorld 中自定义产品图片尺寸的方法。使用模块 Mageplaza_HelloWorld 的一个块类，然后在模块的块类的构造函数中注入对象 \Magento\Catalog\Model\ProductRepository 和 \Magento\Catalog\Helper\Image 。
app/code/Mageplaza/HelloWorld/Block/HelloWorld.php
<?php
namespace Mageplaza\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;
}
}
?>
当把产品基本图片大小调整为准确宽高的时候，确保图片比例是否固定，比例和透明度是正确的。现在，可以按照以下示例来加载产品，然后修改产品图片并且进行展示。这里的 produt_base_image 是图片 ID 。
<?php
//Get product object by ID
$id = 'PRODUCT_ID';
$_product = $block->getProductById($id);
//Get product object by SKU
// $sku = '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="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />
方法二：在模板文件中修改产品图片
除了自定义的块 HelloWorld ，还可以在模板文件（.phtml）中改变产品图片。在模板文件中使用并且执行以下代码片段。
<?php
//Get product object by ID
$id = 'PRODUCT_ID';
$_product = $block->getProductById($id);
//Get product object by SKU
// $sku = '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="<?php echo $resizedImageUrl;?>" alt="<?php echo $_product->getTitle();?>" />