Nerd For Tech
Published in

Nerd For Tech

Configure Theme Properties in Magento 2

Configure Theme Properties in Magento 2, view.xml
Configure Theme Properties in Magento 2

What is view.xml file?

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

Configure Image properties in view.xml

<media>
<images module="Magento_Catalog">
...
</images>
</media>
  1. id: Ids are unique image identifiers in any theme scope. id’s 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,
<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>
  1. height: specifies height in pixels of image which is used to resize the image.
  2. width: specifies 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. If 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
constrain
aspect_ratio
background
<image id="category_page_grid" type="small_image">
<width>300</width>
<height>300</height>
<transparency>false</transparency>
<background>[245, 81, 66]</background>
</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> :

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

Follow me on :

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store