Configure Theme Properties in Magento 2 ( view.xml)

Images are now playing a very important role in influencing online customers and encouraging them to buy the product. For engagement in an e-commerce store, images are the basic factor. In Magento 2, we can configure storefront images through the view.xml file.

If you are new to my article, I suggest you go through my previous article in tutorial series.

What is view.xml file?

Images are configured in view.xml file for storefront and can be changed in our theme as per our requirements.

Location in theme folder :

app/design/frontend/<vendor_name>/
├── <theme_name>/
│ ├── etc/
│ │ ├── view.xml

By default, Luma’s view.xml belongs to vendor/magento/theme-frontend-luma/etc/view.xml.

Configure Image properties in view.xml

<media>
<images module="Magento_Catalog">
...
</images>
</media>

Attributes used :

1. id: Ids are unique image identifiers in any theme scope. ids are used in .phtml templates for defining the type and properties of images displayed in each particular location on a particular page
2. type: Type of image is defined here. It can be,
   1. image – corresponds to the Base Image role.
   2. small_image – corresponds to the Small Image role.
   3. swatch_image – corresponds to the Swatch Image role.
   4. swatch_thumb – corresponds to the Swatch Image role.
   5. thumbnail – corresponds to the Thumbnail Image role.

Let’s have an example to change main image size of product detail page:

<media>
<images module="Magento_Catalog">
<image id="product_page_image_medium" type="image_type">
<width>650</width> <!-- Image width in px -->
<height>650</height> <!-- Image height in px -->
</image>
</images>
</media>

There are few parameters used with image:

1. height: specifies height in pixels of image which is used to resize the image.
2. width: specifies the width in pixels of image which is used to resize the image
3. constrain: If set to true, images that are smaller than required by the configuration, are not enlarged. Default value: true, Type: Boolean
4. aspect_ratio: If set to true, the ratio of image width and height are not changed without image fragmentation. Default value: true, Type: Boolean
5. frame: If set to true, the image is not cropped. The attribute is only applied in case the aspect_ratio is set to true. Default value: true, Type: Boolean
6. transparency: If set to true, the transparent background of images is saved. It is set to false, images have a white background (by default). You can set the color for the background using the background parameter. Default value: true. Default value: true, Type: Boolean
7. background: The color for the background of the image. Not applied to images with transparency, if transparency is set to true. Format: “[, ,]”, e.g.: “[255, 255, 255]”. Default Value: [255, 255, 255], Type: string

Note: Before applying background color, you need to change transparent value to false.

For example,

<image id="category_page_grid" type="small_image">
<width>300</width>
<height>300</height>
<transparency>false</transparency>
<background>[245, 81, 66]</background>
</image>

After configuration, we need to resize image:

$ php bin/magento catalog:images:resize
$ php bin/magento cache:flush

Here are the predefined variables :

<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 name="mode">outside</var> <!-- Zoom type (outside/inside) -->
</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">1</var>
</vars>

<exclude> :

The exclude tag is used to list browser resources that need to be excluded from the applied HTML page.

It is often used to remove files from the JavaScript bundling process.

<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.details.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::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">Magento_Tinymce3::tiny_mce</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>

In separate article, I will explain how to create custom id and use in custom module.

Hope this article helped you understand the concept of view.xml. If you have any queries, ask me at aryansrivastavadesssigner@gmail.com or contact me here.

If you want live session, do mail at above email address.

If you like this article, you can buy me a cup of coffee Buy me a Coffee.

Reference Links :

1. https://devdocs.magento.com

Originally published at Medium.