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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s