5

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?

  • share your web URl and what you want o do with image , please make little clear – Manoj Deswal Sep 21 '17 at 5:50
  • @ManojDeswal I need to change image sizes(in this case increase the sizes) as I wish. I cant find which image to to change size inside view.xml file. Images I get is too small. I need to increase the size on main image and according to that also change image sizes of slider. can you help please? – Joey Sep 21 '17 at 5:56
  • need to debug , share your web URL – Manoj Deswal Sep 21 '17 at 5:58
  • I'm still developing locally. can you tell me how can I use image sizes with view.xml and what image sizes i should change to increase size of above scenario? – Joey Sep 21 '17 at 6:02
4

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
  • many many thanks. I will try and get back to you. – Joey Sep 21 '17 at 6:27
  • let me know if any problem ... – Manoj Deswal Sep 21 '17 at 6:27
  • Hi, im still getting the same result. main image is sized 261x261px. – Joey Sep 21 '17 at 6:43
  • what is image size you are using , and try creating new product ... take a image 1000 wide and 1500 in height then check does new product have same problem – Manoj Deswal Sep 21 '17 at 6:46
  • Hi, it seems like image is rendered using correct size, but some javascript code is affecting the final image size. like in the image i mentioned above. any idea how to fix that? – Joey Sep 21 '17 at 7:06

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.