How to resize image of product view page in Magento 2?

The question:

I want to resize product view gallery image. I want to resize main product image to 500X500 size?

How can we achieve this?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

Magento uses the file called view.xml which is maintained at the theme level of the application.

So for example, if you are using the default theme luma you should find the view.xml under vendor/magento/theme-frontend-luma/etc/view.xml

In this file, you would see node inside the node.

The dimension of the images is maintained here under the node.

The id attribute value of the node is referenced in the code base.

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

You can define your custom view.xml in your theme and define width & height as per your requirement.

In case of changing/overwriting the values of the view.xml file you
need to completely copy the entire view.xml file to your custom theme
and change the values.

view.xml does not have a node value fallback system, means if a value
of a node is not present in you custom theme’s view.xml it will not
fallback to its parent theme’s view.xml value, that’s why entire file
needs to be copied.

Once the values changes have been done, you will have to run

php bin/magento catalog:images:resize

This will regenerate the new image sizes.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment