Skip to content
  • LinkedIn
  • Twitter
  • Facebook

Desssigner.in

Aryan Srivastava | Adobe Commerce Certified Developer | Magento Tutor

  • Home
  • About Me
  • Contact
  • Toggle search form
Configure Theme Properties in Magento 2

Configure Theme Properties in Magento 2 ( view.xml)

Posted on June 19, 2021August 26, 2021 By Aryan Srivastava 2 Comments on 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
constrain in magento 2
constrain
aspect_ratio in magento 2
aspect_ratio
background in magento 2
background
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.

Post Views: 1,041
Magento, Magento Theme, Magento2 Tags:Frontend, Magento2, Tutorial, View.xml

Post navigation

Previous Post: Layout Overview in Magento 2
Next Post: Apply / Change Theme in Magento 2

Comments (2) on “Configure Theme Properties in Magento 2 ( view.xml)”

  1. Vicky says:
    December 6, 2022 at 8:48 PM

    Can you please let me know how to create a custom image id and use that in certain specific product view pages? Is that possible?

    Reply
    1. Aryan Srivastava says:
      April 26, 2023 at 11:58 AM

      Create a new image attribute in Magento 2 by going to Stores > Attributes > Product and clicking the Add New Attribute button.
      Give the attribute a unique code and a user-friendly label, such as “custom_image”.
      Set the attribute type to “Media Image”.
      Save the attribute and make sure it is assigned to the appropriate attribute set.
      Go to Stores > Product > Images, and click the Add New Image button.
      Upload an image for your custom attribute and make sure to select the “custom_image” attribute in the “Image Role” dropdown.
      Save the image and make note of the file name.
      Open the view.xml file located in app/design/frontend/[vendor]/[theme]/etc/view.xml.
      Add a new image size configuration for your custom image ID by adding the following code inside the tag:


      [width]
      [height]

      Replace [custom_image_id] with a unique ID for your custom image, such as “custom_image_1”. Replace [width] and [height] with the desired dimensions for your image.
      10. Save the view.xml file.

      Go to the product view page in your Magento 2 store and find the block of code that outputs the product image. This block is usually located in the catalog_product_view.xml file in your theme’s layout directory.
      Replace the existing image tag with the following code:

      Replace [custom_image_id] with the ID you set in step 9. Replace [product_id] with the ID of the current product, which you can get using the following code:

      getProduct(); ?>
      getId(); ?>

      Replace [width] and [height] with the desired dimensions for your image.
      13. Save the file and clear your Magento cache.

      Now your custom image should be displayed on the product view page using the dimensions and ID you specified in the view.xml file.

      If still you are not able to use, do ping me on aryansrivastavadesssigner@gmail.com. I will help you on call.

      Thanks

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Command list Customer Dashboard Custom Module File override Frontend How to Layout Logout link Magento Magento2 Magento2 Cheat Sheet Magento Tutorial Product Page Theme Tutorial View.xml

CERTIFICATION DIRECTORY

Adobe Commerce Front-End Developer

Adobe Certified Professional - Adobe Commerce Front-End Developer

Adobe Certified Expert-Adobe Commerce Front-End Developer

Copyright © 2023 Desssigner.in.

Powered by PressBook WordPress theme

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT