Magento 2：获取图像的高度宽度

Question

Magento 2 获取图像的高度和宽度。产品图片我需要定义图片的高度宽度。

Answer 1

app/code/Chapagain/HelloWorld/Block/HelloWorld.php
<?php
namespace Chapagain\HelloWorld\Block;
class HelloWorld extends \Magento\Framework\View\Element\Template
{    
    protected $_productRepository;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,        
        \Magento\Catalog\Model\ProductRepository $productRepository,
        array $data = []
    )
    {
        $this->_productRepository = $productRepository;
        parent::__construct($context, $data);
    }

    public function getProductById($id)
    {
        return $this->_productRepository->getById($id);
    }

    public function getProductBySku($sku)
    {
        return $this->_productRepository->get($sku);
    }

    /**
     * Retrieve image width
     *
     * @return int|null
     */
    public function getImageOriginalWidth($product, $imageId, $attributes = [])
    {
        return $this->_productImageHelper->init($product, $imageId, $attributes)->getWidth();
    }

    /**
     * Retrieve image height
     *
     * @return int|null
     */
    public function getImageOriginalHeight($product, $imageId, $attributes = [])
    {
        return $this->_productImageHelper->init($product, $imageId, $attributes)->getHeight();
    }    
}
?>

现在，我们通过模板文件中的 id 和 sku 加载产品。然后打印产品图像的高度和宽度。我打印了 product_small_image 的高度和宽度。同理，我们可以打印product_base_image、product_thumbnail_image等的高宽值。

$id = YOUR_PRODUCT_ID;
$sku = 'YOUR_PRODUCT_SKU';
$_product = $block->getProductById($id);
$_product = $block->getProductBySku($sku);
echo $block->getImageWidth($product, 'product_small_image') . '<br />'; 
echo $block->getImageHeight($product, 'product_small_image') . '<br />';

可以从前端模板的视图布局 xml 文件中调整要在前端显示的不同媒体图像的高度和宽度。 Magento 2 的默认 fromtend 模板是 LUMA。因此，此模板的视图布局 xml 存在于 YOUR_MAGENTO_ROOT/vendor/magento/theme-frontend-luma/etc/view.xml.

中

这是 view.xml 文件的示例内容，其中定义了媒体图像的高度和宽度：

<media>
    <images module="Magento_Catalog">
        <image id="bundled_product_customization_page" type="thumbnail">
            <width>140</width>
            <height>140</height>
        </image>
        <image id="cart_cross_sell_products" type="thumbnail">
            <width>200</width>
            <height>248</height>
        </image>
        <image id="cart_page_product_thumbnail" type="small_image">
            <width>165</width>
            <height>165</height>
        </image>
        <image id="category_page_grid" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="category_page_grid-1" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="category_page_list" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="customer_account_my_tags_tag_view" type="small_image">
            <width>100</width>
            <height>100</height>
        </image>
        <image id="customer_account_product_review_page" type="image">
            <width>285</width>
            <height>285</height>
        </image>
        <image id="customer_shared_wishlist" type="small_image">
            <width>113</width>
            <height>113</height>
        </image>
        <image id="gift_messages_checkout_small_image" type="small_image">
            <width>75</width>
            <height>75</height>
        </image>
        <image id="gift_messages_checkout_thumbnail" type="thumbnail">
            <width>100</width>
            <height>100</height>
        </image>
        <image id="mini_cart_product_thumbnail" type="thumbnail">
            <width>75</width>
            <height>75</height>
        </image>
        <image id="new_products_content_widget_grid" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="new_products_content_widget_list" type="small_image">
            <width>270</width>
            <height>340</height>
        </image>
        <image id="new_products_images_only_widget" type="small_image">
            <width>78</width>
            <height>78</height>
        </image>
        <image id="product_base_image" type="image">
            <width>265</width>
            <height>265</height>
        </image>
        <image id="product_comparison_list" type="small_image">
            <width>140</width>
            <height>140</height>
        </image>
        <image id="product_page_image_large" type="image"/>
        <image id="product_page_image_medium" type="image">
            <width>700</width>
            <height>560</height>
        </image>
        <image id="product_page_image_small" type="thumbnail">
            <width>88</width>
            <height>110</height>
        </image>
        <image id="product_page_main_image" type="image">
            <width>700</width>
            <height>560</height>
        </image>
        <image id="product_page_main_image_default" type="image">
            <width>700</width>
            <height>560</height>
        </image>
        <image id="product_page_more_views" type="thumbnail">
            <width>88</width>
            <height>110</height>
        </image>
        <image id="product_stock_alert_email_product_image" type="small_image">
            <width>76</width>
            <height>76</height>
        </image>
        <image id="product_small_image" type="small_image">
            <width>135</width>
            <height>135</height>
        </image>
        <image id="product_thumbnail_image" type="thumbnail">
            <width>75</width>
            <height>75</height>
        </image>
        <image id="recently_compared_products_grid_content_widget" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="recently_compared_products_images_names_widget" type="thumbnail">
            <width>75</width>
            <height>90</height>
        </image>
        <image id="recently_compared_products_images_only_widget" type="thumbnail">
            <width>76</width>
            <height>76</height>
        </image>
        <image id="recently_compared_products_list_content_widget" type="small_image">
            <width>270</width>
            <height>340</height>
        </image>
        <image id="recently_viewed_products_grid_content_widget" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
        <image id="recently_viewed_products_images_names_widget" type="small_image">
            <width>75</width>
            <height>90</height>
        </image>
        <image id="recently_viewed_products_images_only_widget" type="small_image">
            <width>76</width>
            <height>76</height>
        </image>
        <image id="recently_viewed_products_list_content_widget" type="small_image">
            <width>270</width>
            <height>340</height>
        </image>
        <image id="related_products_list" type="small_image">
            <width>152</width>
            <height>190</height>
        </image>
        <image id="review_page_product_image" type="small_image">
            <width>285</width>
            <height>285</height>
        </image>
        <image id="rss_thumbnail" type="thumbnail">
            <width>75</width>
            <height>75</height>
        </image>
        <image id="sendfriend_small_image" type="small_image">
            <width>75</width>
            <height>75</height>
        </image>
        <image id="shared_wishlist_email" type="small_image">
            <width>135</width>
            <height>135</height>
        </image>
        <image id="side_column_widget_product_thumbnail" type="thumbnail">
            <width>75</width>
            <height>90</height>
        </image>
        <image id="upsell_products_list" type="small_image">
            <width>152</width>
            <height>190</height>
        </image>
        <image id="wishlist_sidebar_block" type="thumbnail">
            <width>75</width>
            <height>90</height>
        </image>
        <image id="wishlist_small_image" type="small_image">
            <width>113</width>
            <height>113</height>
        </image>
        <image id="wishlist_thumbnail" type="small_image">
            <width>240</width>
            <height>300</height>
        </image>
    </images>
</media>

Answer 2

您可以使用下面提到的代码在模板中获取完整的产品图片路径：

echo $block->getImage($_product, $image)->getImageUrl();

它将return一个完整的图像路径，包括Magento 2产品的缓存图像路径。

不过，如果你还需要获取图片的高宽，可以使用如下代码：

echo $block->getImage($_product, $image)->getHeight();

它将return你的图像高度。

echo $block->getImage($_product, $image)->getWidth();

而且，它会帮助您 return 图片宽度。

Magento 2：获取图像的高度宽度

Magento 2: Get Height Width of Image

magento

magento2