# 获取产品图片大小

**URL:** https://forum.magentochina.org/t/%E8%8E%B7%E5%8F%96%E4%BA%A7%E5%93%81%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F/735
**Category:** Magento 2.X
**Tags:** 教程, magento2, 开发
**Created:** [2020 年6 月 25 日 02:33 UTC](https://forum.magentochina.org/t/%E8%8E%B7%E5%8F%96%E4%BA%A7%E5%93%81%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F/735 "2020-06-25T02:33:16Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### 作者： ![Vicky](https://forum.magentochina.org/letter_avatar_proxy/v4/letter/v/b19c9b/32.png) [@Vicky](https://forum.magentochina.org/u/Vicky)
#### 发布日期： [2020 年6 月 25 日 02:33 UTC](https://forum.magentochina.org/t/%E8%8E%B7%E5%8F%96%E4%BA%A7%E5%93%81%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F/735/1 "2020-06-25T02:33:16Z")

</div>

我们需要了解在 Magento2 中如何获取产品图片的大小，为了更清楚的展示，强烈建议遵循以下示例：如何展示和获取已上传产品的图片大小（宽和高）。

### 第一步：上传产品

打开自定义模块（Mageplaza\_HelloWorld），在模块的构造函数中的 app/code/Mageplaza/HelloWorld/Block/HelloWorld.php 类中插入 \Magento\Catalog\Model\ProductRepository 类的对象

```auto
<?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);
    }
    
    /**
     * 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();
    }    
}
?>

```

### 第二步：获取产品图片的大小

可以获取并打印 product\_small\_image, product\_base\_image 和 product\_thumbnail\_image 等的高和宽，执行以下代码：

```auto
$id = YOUR_PRODUCT_ID;
$sku = 'YOUR_PRODUCT_SKU';
$_product = $block->getProductById($id);
$_product = $block->getProductBySku($sku);
echo $block->getImageOriginalWidth($_product, 'product_small_image') . '<br />'; 
echo $block->getImageOriginalHeight($_product, 'product_small_image') . '<br />';

```

在 LUMA 作为默认前端模板时，需要打开布局文件 YOUR\_MAGENTO\_ROOT/vendor/magento/theme-frontend-luma/etc/view.xml, 就可以修改不同类型图片的宽和高了。

```auto
<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>

```

## 本教程翻译自Mageplaza模块开发系列，其他内容请点击下面链接:

> [@Magento2模块开发中文教程索引](https://forum.magentochina.org/t/magento2%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E4%B8%AD%E6%96%87%E6%95%99%E7%A8%8B%E7%B4%A2%E5%BC%95/36):
>
> 本文翻译自mageplaza的Magento2模块开发教程,而且正在翻译中. 翻译也是非常好的学习方式，希望下列表中还有我们没有翻译，而你又想分享的内容,请发表文章之后，在下面附上地址。 如果觉得本站翻译得内容对您有帮助，又没有时间帮助翻译回馈社区.请打赏我们，您的支持是我们的动力: 转载说明:非常欢迎转载，但是必须保证文章的完整性并附上原文地址和翻译原文的地址，保证阅读者不会产生歧义. 目录索引: 索 引 中 文 原 文 1 [Magento2如何创建模块](https://forum.magentochina.org/t/Magento-2%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E6%A8%A1%E5%9D%97%E6%95%99%E7%A8%8B/38)[How to Create Module in Magento 2](https://www.mageplaza.com/kb/how-create-hello-world-module-magento-2.html) 2 [控制器详解](https://forum.magentochina.org/t/Magento-2%E6%8E%A7%E5%88%B6%E5%99%A8%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/39)[Create Controllers](https://www.mageplaza.com/magento-2-module-development/how-to-create-controllers-magento-2.html) 3 [CRUD 模型](https://forum.magentochina.org/t/Magento2-CRUD%E6%A8%A1%E5%9E%8B%E8%B5%84%E6%BA%90%E9%9B%86%E5%90%88%E5%B7%A5%E5%8E%82%E5%AF%B9%E8%B1%A1%E8%AF%A6%E8%A7%A3%E6%95%99%E7%A8%8B/43)[CRUD Models](https://www.mageplaza.com/magento-2-module-development/how-to-create-crud-model-magento-2.html) 4 [视图层:块,布局和模板](https://forum.magentochina.org/t/%E8%A7%86%E5%9B%BE%E5%B1%82%E5%9D%97%E5%B8%83%E5%B1%80%E5%92%8C%E6%A8%A1%E6%9D%BF%E6%A8%A1%E6%9D%BF%E6%95%99%E7%A8%8B/50/1)[View: Block, Layouts and templates](https://www.mageplaza.com/magento-2-module-development/view-block-layout-template-magento-2.html) 5 [配置system.xml](https://forum.magentochina.org/t/%E5%A6%82%E4%BD%95%E5%88%9B%E5%BB%BA%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6systemxml/55)[Configuration - System.xm…](https://www.mageplaza.com/magento-2-module-development/create-system-xml-configuration-magento-2.html)