Loading…

Magento 2 – How to configure the size of the product images

If you want to configure the product images size you need to change some properties in the view.xml configuration file.

  1. Overwrite the view.xml file in your custom theme

    If you already have a custom theme (you can read more here about custom themes) you need to go to the app/design/frontend/YourVendorName/YourThemeName path and make an etc folder with a view.xml file inside.

  2. Set your custom widths and heights

    Copy the content of etc/view.xml file from an existing theme and change the widths and heights accordingly to your design requirements.

 

This is an example of a view.xml file:

<?xml version="1.0"?>

<!--

/**

 * Copyright © 2013-2017 Magento, Inc. 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">

            <image id="bundled_product_customization_page" type="thumbnail">

                <width>140</width>

                <height>140</height>

            </image>

            <image id="cart_cross_sell_products" type="thumbnail">

                <width>200</width>

                <height>248</height>

            </image>

            <image id="cart_page_product_thumbnail" type="small_image">

                <width>165</width>

                <height>165</height>

            </image>

            <image id="category_page_grid" type="small_image">

                <width>240</width>

                <height>300</height>

            </image>

            <image id="category_page_grid-1" type="small_image">

                <width>240</width>

                <height>300</height>

            </image>

            <image id="category_page_list" type="small_image">

                <width>240</width>

                <height>300</height>

            </image>

            <image id="customer_account_my_tags_tag_view" type="small_image">

                <width>100</width>

                <height>100</height>

            </image>

            <image id="customer_account_product_review_page" type="image">

                <width>285</width>

                <height>285</height>

            </image>

            <image id="customer_shared_wishlist" type="small_image">

                <width>113</width>

                <height>113</height>

            </image>

            <image id="gift_messages_checkout_small_image" type="small_image">

                <width>75</width>

                <height>75</height>

            </image>

            <image id="gift_messages_checkout_thumbnail" type="thumbnail">

                <width>100</width>

                <height>100</height>

            </image>

            <image id="mini_cart_product_thumbnail" type="thumbnail">

                <width>75</width>

                <height>75</height>

            </image>

            <image id="new_products_content_widget_grid" type="small_image">

                <width>240</width>

                <height>300</height>

            </image>

            <image id="new_products_content_widget_list" type="small_image">

                <width>270</width>

                <height>340</height>

            </image>

            <image id="new_products_images_only_widget" type="small_image">

                <width>78</width>

                <height>78</height>

            </image>

            <image id="product_base_image" type="image">

                <width>265</width>

                <height>265</height>

            </image>

            <image id="product_comparison_list" type="small_image">

                <width>140</width>

                <height>140</height>

            </image>

            <image id="product_page_image_large" type="image"/>

            <image id="product_page_image_medium" type="image">

                <width>700</width>

                <height>560</height>

            </image>

            <image id="product_page_image_small" type="thumbnail">

                <width>88</width>

                <height>110</height>

            </image>

            <image id="product_page_main_image" type="image">

                <width>700</width>

                <height>560</height>

            </image>

            <image id="product_page_main_image_default" type="image">

                <width>700</width>

                <height>560</height>

            </image>

            <image id="product_page_more_views" type="thumbnail">

                <width>88</width>

                <height>110</height>

            </image>

            <image id="product_stock_alert_email_product_image" type="small_image">

                <width>76</width>

                <height>76</height>

            </image>

            <image id="product_small_image" type="small_image">

                <width>135</width>

                <height>135</height>

            </image>

            <image id="product_thumbnail_image" type="thumbnail">

                <width>75</width>

                <height>75</height>

            </image>

            <image id="recently_compared_products_grid_content_widget" type="small_image">

                <width>240</width>

                <height>300</height>

            </image>

            <image id="recently_compared_products_images_names_widget" type="thumbnail">

                <width>75</width>

                <height>90</height>

            </image>

            <image id="recently_compared_products_images_only_widget" type="thumbnail">

                <width>76</width>

                <height>76</height>

            </image>

            <image id="recently_compared_products_list_content_widget" type="small_image">

                <width>270</width>

                <height>340</height>

            </image>

            <image id="recently_viewed_products_grid_content_widget" type="small_image">

                <width>240</width>

                <height>300</height>

            </image>

            <image id="recently_viewed_products_images_names_widget" type="small_image">

                <width>75</width>

                <height>90</height>

            </image>

            <image id="recently_viewed_products_images_only_widget" type="small_image">

                <width>76</width>

                <height>76</height>

            </image>

            <image id="recently_viewed_products_list_content_widget" type="small_image">

                <width>270</width>

                <height>340</height>

            </image>

            <image id="related_products_list" type="small_image">

                <width>152</width>

                <height>190</height>

            </image>

            <image id="review_page_product_image" type="small_image">

                <width>285</width>

                <height>285</height>

            </image>

            <image id="rss_thumbnail" type="thumbnail">

                <width>75</width>

                <height>75</height>

            </image>

            <image id="sendfriend_small_image" type="small_image">

                <width>75</width>

                <height>75</height>

            </image>

            <image id="shared_wishlist_email" type="small_image">

                <width>135</width>

                <height>135</height>

            </image>

            <image id="side_column_widget_product_thumbnail" type="thumbnail">

                <width>75</width>

                <height>90</height>

            </image>

            <image id="upsell_products_list" type="small_image">

                <width>152</width>

                <height>190</height>

            </image>

            <image id="wishlist_sidebar_block" type="thumbnail">

                <width>75</width>

                <height>90</height>

            </image>

            <image id="wishlist_small_image" type="small_image">

                <width>113</width>

                <height>113</height>

            </image>

            <image id="wishlist_thumbnail" type="small_image">

                <width>240</width>

                <height>300</height>

            </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">true</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="navarrows">false</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>

        </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="nav">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="Magento_ConfigurableProduct">

        <var name="gallery_switch_strategy">prepend</var>

    </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>

 

Leave a Reply