PART 1.2.8 – Theme images, view.xml

Useful documentation:

How to work with image gallery on product page

General about view.xml in theme http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-images.html

Gallery widget (js widget) http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/widgets/widget_gallery.html

Magnifier http://devdocs.magento.com/guides/v2.1/javascript-dev-guide/widgets/widget_gallery_mg.html

 

view.xml what is it used for?

The properties of product images used on the storefront are stored in the view.xml configuration file. The properties for the images displayed on the product pages are defined by the gallery widget options. The options of the widget can be configured in the theme view.xml as well.

view.xml

<images module=“Magento_Catalog”>

    <image id=“unique_image_id” type=“image”>

        <width>100</width> <!– Image width in px –>

        <height>100</height> <!– Image height in px –>

    </image>

</images>

 

Properties that can be modified from the view.xml are:

  • width
  • height
  • constrain
  • aspect_ratio
  • frame
  • transparency
  • background

Basically the same things that could be configured from the template in Magento 1. For more examples on how to use the specific properties: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-images.html

Images in templates

Example from Magento_Catalog/view/template/product/list.phtml

Product image

<?php

$image = ‘category_page_grid’;

echo $block->getImage($product, $image)->toHtml(); ?>

Connection to gallery widget

Inside the view.xml you’ll find a lot of useful settings you can change to have different functionality for the image gallery on the product pages, for example you can change transition effect, zoom levels, thumbnail sizes. 

Nav direction

<var name=“gallery”>

    <var name=“navdir”>vertical</var> <!– Sliding direction of thumbnails (horizontal/vertical) –>

</var>

Behaviour of swatch images.

Swatch image

<vars module=“Magento_ConfigurableProduct”>

    <var name=“change_only_base_image”>true</var>

</vars>

 

<vars module=“Magento_Swatches”>

    <var name=“change_only_base_image”>true</var>

</vars>

Advertisements