Magento 2: Get Height Width of Image
This article shows how get height and width of the media images in Magento 2.
In this example, we will load product by id or sku and then fetch and display height and width of product small image.
To load the product, we will be using Magento 2’s Service Layer for this task. Use of Service Layer is highly encouraged by Magento.
Below is a block class of my custom module (Chapagain_HelloWorld). I have injected object of \Magento\Catalog\Model\ProductRepository class in the constructor of my module’s block class.
app/code/Chapagain/HelloWorld/Block/HelloWorld.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <?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(); } } ?> |
Now, we load the product by id and sku in template file. And then print the height and width of the product image. I have printed the height and width of product_small_image. Similarly, we can print the height and width value of product_base_image, product_thumbnail_image, and so on.
1 2 3 4 5 6 | $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 />'; |
The height and width for different media images to be displayed in frontend can be adjusted from your frontend template’s view layout xml file. The default fromtend template for Magento 2 is LUMA. So, the view layout xml for this template is present in YOUR_MAGENTO_ROOT/vendor/magento/theme-frontend-luma/etc/view.xml.
Here is a sample content of view.xml file where media images’ height and width are defined:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <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> |
Hope this helps. Thanks.
Find me on
Mukesh Chapagain is a graduate of Kathmandu University (Dhulikhel, Nepal) from where he holds a Masters degree in Computer Engineering. Mukesh is a passionate web developer who has keen interest in open source technologies, programming & blogging. 
