0

I want to reduce the width and height of the product image in product detail page magento2?

2

Magento 2 product image size and other image options are defined in <theme_dir>/etc/view.xml.

Themes located in app/design/frontend/<Vendor>/ folder. /etc/view.xml contains images configuration for all storefront product images and thumbnails. You can change it by placing below code in the view.xml file between media tag.

<images module="Magento_Catalog">
        <image id="product_page_image_small" type="thumbnail">
            <width>88</width>
            <height>116</height>
        </image>
        <image id="product_page_main_image" type="image">
            <width>1000</width>
            <height>1320</height>
        </image>
        <image id="product_page_main_image_default" type="image">
            <width>1000</width>
            <height>1320</height>
        </image>
        <image id="product_small_image" type="small_image">
            <width>220</width>
            <height>220</height>
        </image>
</images>

After the changes in the file, please run the deployment commands to reflect the changes on the frontend.

Resize catalog images

Generally, product images are cached while saving the product. However, the magento catalog:images:resize command enables you to resize all images for display on your storefront.

php bin/magento catalog:images:resize

Get more details on https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-images.html

Hope it helps!!!

  • 1
    Good one, this answer is way more complete than mine! :) – Litsher - Nathan Sep 12 at 12:21
  • My image is not resize, it will remain as it is @sumit – Magento Sep 12 at 13:09
  • 1
    Run php bin/magento catalog:images:resize command and deployment scripts – Sumit Sep 12 at 13:11
  • yes but no changes – Magento Sep 13 at 5:41
  • After this command php bin/magento catalog:images:resize? – Sumit Sep 13 at 5:42
1

You can change the dimensions of images by placing a view.xml file in

"app/design/frontend/"themebuilder"/"themename"/etc"

the file should look something like this:

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_page_main_image" type="image">
                <width>700</width>
                <height>560</height>
            </image>
        </images>
   </media>
</view>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.