Magento – Image sizes in detail page

category-productsmagento-2.1product-imagesproduct-view

In my product detail page, fotorama slider images are not the size I expected. I tried using view.xml inside my theme and tried using fallback view.xml. I'm using Blank theme as parent.

I need to change image sizes(in this case increase the sizes) as I wish. I cant find which image size to change inside view.xml file. I've included two images, one with how I get the images and other one showing chrome inspector that Im getting some inline file sizes (261px for this), which I cant find inside view.xml for any image size.

Can please somebody help me?

Best Answer

To change Size of product images and other listing page images or related item image

Edit your view.xml at below location in your extended theme

/app/design/frontend/vendor-name/theme-name/etc/view.xml

Now add following codes for respective images

<?xml version="1.0"?> <!-- /**  * Copyright © 2016 Magento. All rights reserved.  * See COPYING.txt for license details.  */
--> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">

            <!--size changes for product page image -->
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>1000</width>
                <height>1500</height> 
            </image>


            <!--size change listing -->
            <image id="category_page_grid" type="small_image">
                <width>300</width>
                <height>450</height>
            </image>
            <image id="category_page_grid-1" type="small_image">
                <width>300</width>
                <height>450</height>
            </image>
            <image id="category_page_list" type="small_image">
                <width>300</width>
                <height>450</height>
            </image>


            <!--size changes for related & upsell-->

            <image id="related_products_list" type="small_image">
                <width>240</width>
                <height>360</height>
            </image>

            <image id="upsell_products_list" type="small_image">
                <width>240</width>
                <height>360</height>
            </image>

        </images>
    </media>

</view>

Set size as per your ratio of your images

Example: your original image size is 1600px wide and 2400px in height , So set image size in same ratio, you can keep same or for smaller like 1000 * 1500.

After that run following commands if you are in developer mode

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

or if your are in production mode then run 

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento deploy:mode:set production
Related Topic