Magento 2 Change image orientation at frontend using view.xml

Hello Friends!!!

In this article, we will learn how we can change image orientation and a few other things in our custom theme.

Here, I have created a custom theme directory ‘Wtheme’ inside the <magento-root-directory>/app/design/frontend/Vendor directory.

In this custom theme, I have created the view.xml file inside the <magento-root-directory>/app/design/frontend/Vendor/Wtheme/etc/ directory.

What is the view.xml file used for?

The view.xml file is used to set the properties of the product catalog’s images, settings of the product catalog’s image gallery, and settings of JavaScript bundling.

This file is used to set themes and create and use custom properties when working with a custom theme.

For example, we can see what properties are available in this file in the default Blank theme https://github.com/magento/magento2/blob/2.0/app/design/frontend/Magento/blank/etc/view.xml

Customize image orientation:

A. By using <images> Elements:

To change the image properties, we need to use <images module=”Magento_Catalog”>…</images> element content.

<images> Elements contains this element content <image id=”image_id” type=”image_type”>….</image> which contains the properties for different image roles.

Here is an example of how it looks in the <magento-root-directory>/app/design/frontend/Vendor/Wtheme/etc/view.xm file:

<images module="Magento_Catalog">
   ...
      <image id="category_page_list" type="small_image">
         <width>240</width>
         <height>300</height>
      </image>
   ...
</images>

Here id and type are attributes of the <images> element.

id: It is a unique identifier for image properties. By using this identifier, you can get the image and its properties in .phtml template files.

type: It is the type of the image, which are displayed or which images are assigned in the admin-> catalog-> product-> Images Videos section(refer to the following image). There are the following types in Magento:

• image – it corresponds to the Base Image role
• small_image – it corresponds to the Small Image role
• swatch_image – it corresponds to the Swatch Image role
• swatch_thumb – it corresponds to the Swatch Thumb Image role
• thumbnail – it corresponds to the Thumbnail Image role

The role of the image in the website page templates depends on the image type (as, for example, the image with the thumbnail type will be used as a thumbnail image – shrunk view of a picture).

To resize the product image in Magento 2, open the file <magento-root-directory>/app/design/frontend/Vendor/Wtheme/etc/view.xml, find the image with the correct ID and update the width and height parameters.

For example, resizing an image ID = product_small_image allows updating the product image size to 185×135.

<images module="Magento_Catalog">
    <image id="product_small_image" type="small_image">
        <width>185</width> <!-- Image width in px -->
        <height>135</height> <!-- Image height in px -->
    </image>
</images>

Full list of image parameters:

Magento can resize images, keep aspect ratio, keep image aspect ratio transparent, and crop product images.

width: specifies image width in pixels and is used to resize the product image.
height: specifies image height in pixels, and is used to resize the product image.
constrain: If set to true, the image is smaller than the configuration requirements, and cannot be enlarged.

aspect_ratio: If set to true, the ratio of image width and height are not changed without image fragmentation.
frame: If set to true, the image is not cropped. The attribute is only applied in case the aspect_ratio is set to true.

transparency: If set to true, the image with transparent background is saved. If set to false, the image will have a white background (by default).

background: This is the background color for the image, and does not apply to transparent images if transparency is set to true. It is used to remove the white image frame when you resize the image and adjust the background color to match your theme.

Resize catalog images:
When you modify the view.xml file and want to update the image size that you have changed, then execute the following command from CLI:

php bin/magento catalog:images:resize

B. By using <vars> Elements:

In variables, in the <vars>…</vars> element, you can set the properties for the image gallery on the product page. It looks like this:

<vars module="Magento_Catalog">
    <var name="gallery">
      ...
         <var name="nav">thumbs</var>
      ...
    </var>
</vars>

In this example, the name=”nav” property is responsible for the style of the media gallery navigation (there can be thumbnails, dots, or just nothing). Here we see thumbnails.

There is a variety of such properties for the gallery. You can find them in the view.xml file of one of the standard themes. You can read more here –

https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_gallery.html

You can modify the values of the existing/predefined variables in the view.xml file or can create your custom variables.

Here, I have created a custom variable borderimg in the view.xml file and got the value of this variable in the list.phtml file inside the <magento-root-directory>/app/design/frontend/Vendor/Wtheme/Magento_Catalog/templates/product/ directory.

I have used this variable to get the CSS class to add a border effect on the mouseover event on the product image. Refer to the following image for the result.

Download the full code.

I have also modified some values in the gallery(transition on full screen and magnifier) variables. Refer to the following images for the result.

JavaScript bundling in view.xml:

In the view.xml file, the <exclude> tag is used to list the browser resources that need to be excluded from the applied HTML page.

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

JavaScript bundling is an optimization technique that you can use to reduce the number of server requests for JavaScript files. Bundling does this by merging multiple JavaScript files together into one file to reduce the number of page requests.

Example: The following code will remove the files from the bundling process.

<exclude>
    <item type="file">Lib::jquery/jquery.min.js</item>
    <item type="file">Lib::jquery/jquery-ui-1.9.2.js</item>
</exclude>

For more information, check here https://developer.adobe.com/commerce/frontend-core/guide/themes/configure/

Hope this will be helpful.
Thanks 🙂