Let’s say if you want to adjust the size of category grid product image to 360px x 180px (original: 240px x 300px) as below.
Step 1- Find view.xml file
Almost all the configurations for product images are included in view.xml (includes width and height). Therefore, if you want to change resize product images in Magento 2.3.6, you need to adjust the view.xml file.
The conventional location of view.xml for a theme is <theme_dir>/etc/view.xml.
Eg: app/design/CheapGlassses123/glasses/etc/view.xml
If your theme doesn’t have view.xml file, simply find it at your parent theme etc/ folder and copy to your theme folder. This follows the fallback mechanism of Magento.
The location of view.xml is different depending on you are using Magento Blank theme or Magento Luma theme:
Magento/Blank: vendor/magento/theme-frontend-blank/etc/view.xml
Magento/Luma: vendor/magento/theme-frontend-luma/etc/view.xml
Magento doesn’t recommend override core’s code so you shouldn’t modify these files. It’s better to copy to a new one in app/ folder to modify it.
Step 2 – Find the correct image id and type
In view.xml, image properties are configured in the scope of <images> element:
<?xml version=”1.0″?>
<view xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Config/etc/view.xsd”>
<media>
<images module=”Magento_Catalog”>
<!– Product images are configured within this element scope –>
<image id=”bundled_product_customization_page” type=”thumbnail”>
<width>140</width>
<height>140</height>
</image>
<image id=”cart_cross_sell_products” type=”thumbnail”>
<width>152</width>
<height>188</height>
</image>
<image id=”cart_page_product_thumbnail” type=”small_image”>
<width>110</width>
<height>160</height>
</image>
<image id=”category_page_grid” type=”small_image”>
<width>275</width>
<height>275</height>
</image>
<image id=”category_page_list” type=”small_image”>
<width>275</width>
<height>275</height>
</image>
Each product image in Magento has an id and type properties. They are defined in <image> node inside view.xml:
<images module=”Magento_Catalog”>
<image id=”unique_image_id” type=”image_type”>
…
</image>
<images/>
Find your image unique id that contains the definition for the product image.
In our situation, the image id is <image id=”category_page_grid” type=”small_image”> .
TIP: To find the image id, find the node that has width and height exact as your output image. Say if your images is 700px x 700px . Find the node that has <width>700</width> and <height>700</height>
Step 3 – Configure product images in Magento 2.3.6
After you’ve found the element that contains the configuration for the product images, change the value of <width> and <height> node
<images module=”Magento_Catalog”>
<image id=”category_page_grid” type=”small_image”>
<width><!– Replace this with width in px : 360–></width>
<height><!– Replace this with height in px: 180 –></height>
</image>
</images>
Step 4 – Clean the cache
Clean Magento cache in order to apply the configurations.
You can go to System -> Tools -> Cache Management. Then click Flush Magento Cache button to clear Magento Cache.
Change product image sizes: Flush Magento Cache
Or you can do this with the command line: php bin/magento cache:flush
In some cases, you would want to resize all images on your storefront so they are served immediately, which will speed up the page load on the first load.
Situations which this can be necessary might be:
After you import products, which might have images of various sizes
If image sizes were changed
Image cache has been flushedRun this command from Magento root folder: php bin/magento catalog:images:resize
Change product image sizes: Command from Magento root folder
After that, all of your category grid images have been resized.