Magento2: Image showing as different sizes on frontend --> Magent 2.1.6

Created on 25 Apr 2017  路  22Comments  路  Source: magento/magento2

Preconditions

  1. Magento 2.1.6
  2. PHP 5.6.30

Steps to reproduce

  1. Upgraded from Magento 2.1.5 to 2.1.6
  2. Flush Cache
  3. Update app/design/frontend/..../default/etc/view.xml
  4. php -f bin/magento catalog:images:resize

Expected result

  1. Upgrade should be successful and store should look the same
    imagesize

Actual result

  1. Images on frontend are not resized by Magento but instead shown as the original image size, hence frontend has images of all different sizes.
Catalog Fixed in 2.1.x Clear Description Format is valid Ready for Work needs update bug report
Source
picture msawyers

Most helpful comment

This might also help: https://github.com/magento/magento2/commit/94fe732f32a72d75d80213ef2c0d55ef47f65d44#diff-40ec188205e5060c6f13a41c69fee0a5
This is what changed in between Magento 2.1.5 to 2.1.6 to the view.xml file of the blank theme.
It's possible you'll have to copy these changes to your custom theme's view.xml file.

You should always look at the differences of the code before upgrading a Magento version. Often times there are things being changed in the frontend code (xml, phtml, js, ... files) which can cause backwards incompatible changes, even in minor releases :)

picture hostep on 26 Apr 2017
👍2

All 22 comments

Tracking internally as MAGETWO-67805

choukalos picture choukalos on 25 Apr 2017

possible duplicate of #9385

@msawyers, could you please test if including <frame>0</frame> within that image definition in view.xml solves the issue for you?

korostii picture korostii on 26 Apr 2017

Steps

  1. Update app/design/frontend/..../default/etc/view.xml
    code

  2. php bin/magento cache:flush

Expected result

  1. All catalog image sizes should be same

Actual result

  1. No change, images are still showing as different sizes.

Please note this is not same issue

as #9385. I am not having issues with white spaces, instead the height of my catalog images are that of the actual image size and is not being resized by Magento when shown on frontend. All image widths are consistent, however the heights are not. should be 480*440.
catalog

msawyers picture msawyers on 26 Apr 2017

This might also help: https://github.com/magento/magento2/commit/94fe732f32a72d75d80213ef2c0d55ef47f65d44#diff-40ec188205e5060c6f13a41c69fee0a5
This is what changed in between Magento 2.1.5 to 2.1.6 to the view.xml file of the blank theme.
It's possible you'll have to copy these changes to your custom theme's view.xml file.

You should always look at the differences of the code before upgrading a Magento version. Often times there are things being changed in the frontend code (xml, phtml, js, ... files) which can cause backwards incompatible changes, even in minor releases :)

hostep picture hostep on 26 Apr 2017
👍2

okay, I will look into it and update.

msawyers picture msawyers on 27 Apr 2017

I made all checks, still unable to identify a cause. Product main pageimage seems to be using the correct parameters from the view.xml file and all other pages are using the correct width, just height not resized.

Is ImageMagick php extension required for change in 2.1.6 if gd extension is already installed?

Additionally, I have PHP 5.6.30 installed, can that be related to this issue?

msawyers picture msawyers on 28 Apr 2017

@msawyers, @korostii, @hostep please check out the Technical Bulletin we've just posted about this issue with 2.1.6. We hope it helps -- if not, send information my way, and we'll try again.

http://devdocs.magento.com/guides/v2.1/release-notes/tech_bull_216-imageresize.html

jfrontain picture jfrontain on 28 Apr 2017

I am having the same issue. Unfortunately, the Technical Bulletin solution, didn't solve my problem, even after flushing the cache php bin/magento cache:flush and php bin/magento catalog:images:resize.

That is my etc/view.xml

<?xml version="1.0"?>
<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="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
                <frame>0</frame>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>152</width>
                <height>188</height>
                <frame>0</frame>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>110</width>
                <height>160</height>
                <frame>0</frame>
            </image>
            <image id="category_page_grid" type="small_image">
                <width>240</width>
                <height>300</height>
                <frame>0</frame>
            </image>
            <image id="category_page_list" type="small_image">
                <width>240</width>
                <height>300</height>
                <frame>0</frame>
            </image>
            <image id="customer_account_my_tags_tag_view" type="small_image">
                <width>100</width>
                <height>100</height>
                <frame>0</frame>
            </image>
            <image id="customer_account_product_review_page" type="image">
                <width>285</width>
                <height>285</height>
                <frame>0</frame>
            </image>
            <image id="customer_shared_wishlist" type="small_image">
                <width>113</width>
                <height>113</height>
                <frame>0</frame>
            </image>
            <image id="gift_messages_checkout_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
                <frame>0</frame>
            </image>
            <image id="gift_messages_checkout_thumbnail" type="thumbnail">
                <width>100</width>
                <height>100</height>
                <frame>0</frame>
            </image>
            <image id="mini_cart_product_thumbnail" type="thumbnail">
                <width>78</width>
                <height>78</height>
                <frame>0</frame>
            </image>
            <image id="new_products_content_widget_grid" type="small_image">
                <width>240</width>
                <height>300</height>
                <frame>0</frame>
            </image>
            <image id="new_products_content_widget_list" type="small_image">
                <width>270</width>
                <height>270</height>
                <frame>0</frame>
            </image>
            <image id="new_products_images_only_widget" type="small_image">
                <width>78</width>
                <height>78</height>
                <frame>0</frame>
            </image>
            <image id="product_base_image" type="image">
                <width>265</width>
                <height>265</height>
                <frame>0</frame>
            </image>
            <image id="product_comparison_list" type="small_image">
                <width>140</width>
                <height>140</height>
                <frame>0</frame>
            </image>
            <image id="product_page_image_large" type="image">
                <frame>0</frame>
            </image>
            <image id="product_page_image_medium" type="image">
                <width>700</width>
                <height>700</height>
                <frame>0</frame>
            </image>
            <image id="product_page_image_small" type="thumbnail">
                <width>90</width>
                <height>90</height>
                <frame>0</frame>
            </image>
            <image id="product_page_main_image" type="image">
                <width>700</width>
                <height>700</height>
                <frame>0</frame>
            </image>
            <image id="product_page_main_image_default" type="image">
                <width>700</width>
                <height>700</height>
                <frame>0</frame>
            </image>
            <image id="product_page_more_views" type="thumbnail">
                <width>90</width>
                <height>90</height>
                <frame>0</frame>
            </image>
            <image id="product_stock_alert_email_product_image" type="small_image">
                <width>76</width>
                <height>76</height>
                <frame>0</frame>
            </image>
            <image id="product_small_image" type="small_image">
                <width>135</width>
                <height>135</height>
                <frame>0</frame>
            </image>
            <image id="product_thumbnail_image" type="thumbnail">
                <width>75</width>
                <height>75</height>
                <frame>0</frame>
            </image>
            <image id="recently_compared_products_grid_content_widget" type="small_image">
                <width>240</width>
                <height>300</height>
                <frame>0</frame>
            </image>
            <image id="recently_compared_products_images_names_widget" type="thumbnail">
                <width>75</width>
                <height>90</height>
                <frame>0</frame>
            </image>
            <image id="recently_compared_products_images_only_widget" type="thumbnail">
                <width>76</width>
                <height>76</height>
                <frame>0</frame>
            </image>
            <image id="recently_compared_products_list_content_widget" type="small_image">
                <width>270</width>
                <height>207</height>
                <frame>0</frame>
            </image>
            <image id="recently_viewed_products_grid_content_widget" type="small_image">
                <width>240</width>
                <height>300</height>
                <frame>0</frame>
            </image>
            <image id="recently_viewed_products_images_names_widget" type="small_image">
                <width>75</width>
                <height>90</height>
                <frame>0</frame>
            </image>
            <image id="recently_viewed_products_images_only_widget" type="small_image">
                <width>76</width>
                <height>76</height>
                <frame>0</frame>
            </image>
            <image id="recently_viewed_products_list_content_widget" type="small_image">
                <width>270</width>
                <height>270</height>
                <frame>0</frame>
            </image>
            <image id="related_products_list" type="small_image">
                <width>140</width>
                <height>140</height>
                <frame>0</frame>
            </image>
            <image id="review_page_product_image" type="small_image">
                <width>285</width>
                <height>285</height>
                <frame>0</frame>
            </image>
            <image id="rss_thumbnail" type="thumbnail">
                <width>75</width>
                <height>75</height>
                <frame>0</frame>
            </image>
            <image id="sendfriend_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
                <frame>0</frame>
            </image>
            <image id="shared_wishlist_email" type="small_image">
                <width>135</width>
                <height>135</height>
                <frame>0</frame>
            </image>
            <image id="side_column_widget_product_thumbnail" type="thumbnail">
                <width>75</width>
                <height>90</height>
                <frame>0</frame>
            </image>
            <image id="upsell_products_list" type="small_image">
                <width>140</width>
                <height>140</height>
                <frame>0</frame>
            </image>
            <image id="wishlist_sidebar_block" type="thumbnail">
                <width>75</width>
                <height>90</height>
                <frame>0</frame>
            </image>
            <image id="wishlist_small_image" type="small_image">
                <width>113</width>
                <height>113</height>
                <frame>0</frame>
            </image>
            <image id="wishlist_thumbnail" type="small_image">
                <width>240</width>
                <height>300</height>
                <frame>0</frame>
            </image>
        </images>
    </media>
    <vars module="Magento_Catalog">

        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">
            <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
            <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
            <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides arrows(true/false) -->
            <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
            <var name="transition">
                <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
            </var>
            <var name="fullscreen">
                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                <var name="transition">
                    <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
                </var>
            </var>
        </var>

        <var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

        <var name="breakpoints">
            <var name="mobile">
                <var name="conditions">
                    <var name="max-width">767px</var>
                </var>
                <var name="options">
                    <var name="options">
                        <var name="navigation">dots</var>
                    </var>
                </var>
            </var>
        </var>
        <!-- end. Gallery and magnifier theme settings -->

        <var name="product_small_image_sidebar_size">100</var>  <!-- Override for small product image -->
        <var name="product_base_image_size">275</var>           <!-- Override for base product image -->
        <var name="product_base_image_icon_size">48</var>       <!-- Base product image icon size -->

        <var name="product_list_image_size">166</var>           <!-- New Product image size used in product list -->
        <var name="product_zoom_image_size">370</var>           <!-- New Product image size used for zooming -->

        <var name="product_image_white_borders">0</var>
    </vars>
    <vars module="Magento_Bundle">
        <var name="product_summary_image_size">58</var>         <!-- New Product image size used for summary block-->
    </vars>
    <vars module="Js_Bundle">
        <var name="bundle_size">1MB</var>
    </vars>
    <exclude>
        <item type="file">Lib::jquery/jquery.min.js</item>
        <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
        <item type="file">Lib::jquery/jquery.ba-hashchange.min.js</item>
        <item type="file">Lib::jquery/jquery.details.js</item>
        <item type="file">Lib::jquery/jquery.details.min.js</item>
        <item type="file">Lib::jquery/jquery.hoverIntent.js</item>
        <item type="file">Lib::jquery/colorpicker/js/colorpicker.js</item>
        <item type="file">Lib::requirejs/require.js</item>
        <item type="file">Lib::requirejs/text.js</item>
        <item type="file">Lib::date-format-normalizer.js</item>
        <item type="file">Lib::legacy-build.min.js</item>
        <item type="file">Lib::mage/captcha.js</item>
        <item type="file">Lib::mage/dropdown_old.js</item>
        <item type="file">Lib::mage/list.js</item>
        <item type="file">Lib::mage/loader_old.js</item>
        <item type="file">Lib::mage/webapi.js</item>
        <item type="file">Lib::mage/zoom.js</item>
        <item type="file">Lib::mage/translate-inline-vde.js</item>
        <item type="file">Lib::mage/requirejs/mixins.js</item>
        <item type="file">Lib::mage/requirejs/static.js</item>
        <item type="file">Magento_Customer::js/zxcvbn.js</item>
        <item type="file">Magento_Catalog::js/zoom.js</item>
        <item type="file">Magento_Ui::js/lib/step-wizard.js</item>
        <item type="file">Magento_Ui::js/form/element/ui-select.js</item>
        <item type="file">Magento_Ui::js/form/element/file-uploader.js</item>
        <item type="file">Magento_Ui::js/form/components/insert.js</item>
        <item type="file">Magento_Ui::js/form/components/insert-listing.js</item>
        <item type="directory">Magento_Ui::js/timeline</item>
        <item type="directory">Magento_Ui::js/grid</item>
        <item type="directory">Magento_Ui::js/dynamic-rows</item>
        <item type="directory">Magento_Ui::templates/timeline</item>
        <item type="directory">Magento_Ui::templates/grid</item>
        <item type="directory">Magento_Ui::templates/dynamic-rows</item>
        <item type="directory">Magento_Swagger::swagger-ui</item>
        <item type="directory">Lib::modernizr</item>
        <item type="directory">Lib::tiny_mce</item>
        <item type="directory">Lib::varien</item>
        <item type="directory">Lib::jquery/editableMultiselect</item>
        <item type="directory">Lib::jquery/jstree</item>
        <item type="directory">Lib::jquery/fileUploader</item>
        <item type="directory">Lib::css</item>
        <item type="directory">Lib::lib</item>
        <item type="directory">Lib::extjs</item>
        <item type="directory">Lib::prototype</item>
        <item type="directory">Lib::scriptaculous</item>
        <item type="directory">Lib::less</item>
        <item type="directory">Lib::mage/adminhtml</item>
        <item type="directory">Lib::mage/backend</item>
    </exclude>
</view>
ci2014 picture ci2014 on 1 May 2017

Same on my end. No change.

msawyers picture msawyers on 2 May 2017

Bug exist in default Luma theme. Look at screenshot attached where entire product images are not fully displayed
bugimage

msawyers picture msawyers on 2 May 2017

Please fix this image resize issue in next version.

msawyers picture msawyers on 2 May 2017

@choukalos

msawyers picture msawyers on 2 May 2017

@jfrontain The same issue. The Technical Bulletin did not help me. The all pictures and vertical thumbnails still look bad.

MargoNikk picture MargoNikk on 3 May 2017

Having the same issue. The technical bulletin doesn't help.

Magento 2.1.6
PHP 7.0.18

razvan-f picture razvan-f on 3 May 2017

Here are the changes that I made to resolve this issue on a 2.1.6 install with sample data.

  1. Remove any previously generated images: rm -rf pub/media/catalog/product/cache/*. I believe catalog:images:resize does not override old images automatically.
  2. Flush any configuration cache: php bin/magento help cache:flushso the updated view.xml files are read. php bin/magento help cache:flush config may be sufficient, but I didn't test it.
  3. Apply the changes
  4. Re-run php bin/magento catalog:images:resize

I believe the issues people are seeing have a few causes. The default behavior from the view.xml(s) changed. The values for false & 0 are being interpreted as true in multiple places. Also even after code changes, the stored configuration has to be flushed, and existing images may not be overwritten.

Hope this helps.

keithbentrup picture keithbentrup on 4 May 2017
👍1

i have that same issue...its happend when i do upgrade magento 2.1.4 to 2.1.6
i hope they will release 2.1.7 version soon

ps3z picture ps3z on 15 May 2017

After applying the patch and editing view.xml still does not work and the pictures look awful.

MargoNikk picture MargoNikk on 26 May 2017

Magento just released 2.1.7 with a "reversion of the changes to image resizing that we introduced in 2.1.6": http://devdocs.magento.com/guides/v2.1/release-notes/ReleaseNotes2.1.7CE.html

Can you please check if the problem is gone in 2.1.7? Thanks!

mzeis picture mzeis on 31 May 2017

Hello,

Magento 2.1.7 completely fixed the issue for me. Before that, none of the previous suggested fixes / patches worked.

razvan-f picture razvan-f on 1 Jun 2017

@razvan-f , thank you for update.

veloraven picture veloraven on 7 Jun 2017

@msawyers is this issue still actual for you after 2.1.7 release?

veloraven picture veloraven on 7 Jun 2017

Hi, issue fixed in release 2.1.7

msawyers picture msawyers on 7 Jun 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fvillata picture fvillata  路  3Comments
BenSpace48 picture BenSpace48  路  3Comments
jzalenski picture jzalenski  路  3Comments
salelsol picture salelsol  路  3Comments
comunidademagento picture comunidademagento  路  3Comments