Image sizes in detail page

Question

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?

Answer 1

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