{"id":349295,"date":"2022-08-24T14:27:34","date_gmt":"2022-08-24T14:27:34","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=349295"},"modified":"2024-07-26T07:34:13","modified_gmt":"2024-07-26T07:34:13","slug":"understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/","title":{"rendered":"Magento 2 Change image orientation at frontend using view.xml"},"content":{"rendered":"\n<p>Hello Friends!!!<\/p>\n\n\n\n<p>In this article, we will learn how we can change image orientation and a few other things in our <a href=\"https:\/\/webkul.com\/blog\/custom-theme-in-magento2\/\">custom theme<\/a>.<\/p>\n\n\n\n<p>Here, I have created a custom theme directory &#8216;Wtheme&#8217; inside the <em>&lt;magento-root-directory&gt;\/app\/design\/frontend\/Vendor<\/em> directory.<\/p>\n\n\n\n<p>In this custom theme, I have created the view.xml file inside the <em>&lt;magento-root-directory&gt;\/app\/design\/frontend\/Vendor\/Wtheme\/etc\/ <\/em>directory.<\/p>\n\n\n\n<p><strong>What is the view.xml file used for?<\/strong><\/p>\n\n\n\n<p>The <strong>view.xml<\/strong> file is used to set the properties of the product catalog&#8217;s images, settings of the product catalog&#8217;s image gallery, and settings of <a href=\"https:\/\/webkul.com\/blog\/js-bundling-in-magento2\/\">JavaScript bundling<\/a>.<\/p>\n\n\n\n<p>This file is used to set themes and create and use custom properties when working with a custom theme.<\/p>\n\n\n\n<p>For example, we can see what properties are available in this file in the default Blank theme <a href=\"https:\/\/github.com\/magento\/magento2\/blob\/2.0\/app\/design\/frontend\/Magento\/blank\/etc\/view.xml\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/magento\/magento2\/blob\/2.0\/app\/design\/frontend\/Magento\/blank\/etc\/view.xml<\/a><\/p>\n\n\n\n<p><strong><span style=\"text-decoration: underline\">Customize image orientation:<\/span><\/strong><\/p>\n\n\n\n<p><strong>A. By using &lt;images&gt; Elements:<\/strong> <\/p>\n\n\n\n<p>To change the image properties, we need to use <em>&lt;images module=&#8221;Magento_Catalog&#8221;>\u2026&lt;\/images> <\/em>element content.<\/p>\n\n\n\n<p>&lt;images> Elements contains this element content <em>&lt;image id=&#8221;image_id&#8221; type=&#8221;image_type&#8221;>\u2026.&lt;\/image><\/em> which contains the properties for different image roles.<\/p>\n\n\n\n<p>Here is an example of how it looks in the <em>&lt;magento-root-directory>\/app\/design\/frontend\/Vendor\/Wtheme\/etc\/view.xm<\/em> file:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;images module=&quot;Magento_Catalog&quot;&gt;\n   ...\n      &lt;image id=&quot;category_page_list&quot; type=&quot;small_image&quot;&gt;\n         &lt;width&gt;240&lt;\/width&gt;\n         &lt;height&gt;300&lt;\/height&gt;\n      &lt;\/image&gt;\n   ...\n&lt;\/images&gt;<\/pre>\n\n\n\n<p>Here <strong>id<\/strong> and <strong>type<\/strong> are attributes of the &lt;<strong>images<\/strong>&gt; element.<\/p>\n\n\n\n<p><strong>id:<\/strong> It is a unique identifier for image properties. By using this identifier, you can get the image and its properties in .phtml template files.<\/p>\n\n\n\n<p><strong>type:<\/strong> It is the type of the image, which are displayed or which images are assigned in the admin-&gt; catalog-&gt; product-&gt; Images Videos section(refer to the following image). There are the following types in Magento:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>image<\/strong> \u2013 it corresponds to the <strong>Base<\/strong> Image role<\/li>\n\n\n\n<li><strong>small_image<\/strong> \u2013 it corresponds to the <strong>Small<\/strong> Image role<\/li>\n\n\n\n<li><strong>swatch_image<\/strong> \u2013 it corresponds to the <strong>Swatch<\/strong> Image role<\/li>\n\n\n\n<li><strong>swatch_thumb<\/strong> \u2013 it corresponds to the <strong>Swatch Thumb<\/strong> Image role<\/li>\n\n\n\n<li><strong>thumbnail<\/strong> \u2013 it corresponds to the <strong>Thumbnail<\/strong> Image role<\/li>\n<\/ul>\n\n\n\n<p>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 \u2013 shrunk view of a picture).<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"612\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png\" alt=\"Screenshot-from-2022-08-24-18-07-11\" class=\"wp-image-349302\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-300x153.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-250x128.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-768x392.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11.png 1309w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>To resize the product image in Magento 2, open the file<em> &lt;magento-root-directory>\/app\/design\/frontend\/Vendor\/Wtheme\/etc\/view.xml<\/em>, find the image with the correct ID and update the width and height parameters.<\/p>\n\n\n\n<p>For example, resizing an image ID = <em>product_small_image<\/em> allows updating the product image size to 185\u00d7135.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;images module=&quot;Magento_Catalog&quot;&gt;\n    &lt;image id=&quot;product_small_image&quot; type=&quot;small_image&quot;&gt;\n        &lt;width&gt;185&lt;\/width&gt; &lt;!-- Image width in px --&gt;\n        &lt;height&gt;135&lt;\/height&gt; &lt;!-- Image height in px --&gt;\n    &lt;\/image&gt;\n&lt;\/images&gt;<\/pre>\n\n\n\n<p><strong>Full list of image parameters<\/strong>:<br><br>Magento can resize images, keep aspect ratio, keep image aspect ratio transparent, and crop product images.<\/p>\n\n\n\n<p><strong>width:<\/strong> specifies image width in pixels and is used to resize the product image.<br><strong>height: <\/strong>specifies image height in pixels, and is used to resize the product image.<br><strong>constrain:<\/strong> If set to true, the image is smaller than the configuration requirements, and cannot be enlarged.<\/p>\n\n\n\n<p><strong>aspect_ratio:<\/strong> If set to true, the ratio of image width and height are not changed without image fragmentation.<br><strong>frame:<\/strong> If set to true, the image is not cropped. The attribute is only applied in case the aspect_ratio is set to true.<\/p>\n\n\n\n<p><strong>transparency:<\/strong> If set to true, the image with transparent background is saved. If set to false, the image will have a white background (by default).<\/p>\n\n\n\n<p><strong>background:<\/strong> 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.<\/p>\n\n\n\n<p><strong><span style=\"text-decoration: underline\">Resize catalog images:<br><\/span><\/strong>When you modify the<strong> view.xml<\/strong> file and want to update the image size that you have changed, then execute the following command from CLI:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento catalog:images:resize<\/pre>\n\n\n\n<p><strong>B. By using &lt;vars&gt; Elements: <\/strong><br><br>In variables, in the &lt;vars&gt;\u2026&lt;\/vars&gt; element, you can set the properties for the image gallery on the product page. It looks like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;vars module=&quot;Magento_Catalog&quot;&gt;\n    &lt;var name=&quot;gallery&quot;&gt;\n      ...\n         &lt;var name=&quot;nav&quot;&gt;thumbs&lt;\/var&gt;\n      ...\n    &lt;\/var&gt;\n&lt;\/vars&gt;<\/pre>\n\n\n\n<p>In this example, the <em>name=&#8221;nav<\/em>&#8221; property is responsible for the style of the media gallery navigation (there can be thumbnails, dots, or just nothing). Here we see thumbnails.<\/p>\n\n\n\n<p>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 \u2013<\/p>\n\n\n\n<p><a href=\"https:\/\/devdocs.magento.com\/guides\/v2.3\/javascript-dev-guide\/widgets\/widget_gallery.html\">https:\/\/devdocs.magento.com\/guides\/v2.3\/javascript-dev-guide\/widgets\/widget_gallery.html<\/a><\/p>\n\n\n\n<p>You can modify the values of the existing\/predefined variables in the view.xml file or can create your custom variables.<\/p>\n\n\n\n<p>Here, I have created a custom variable <strong>borderimg<\/strong> in the <a href=\"https:\/\/github.com\/khushboowebkul\/wtheme-project\/blob\/main\/src\/app\/design\/frontend\/Vendor\/Wtheme\/etc\/view.xml\" target=\"_blank\" rel=\"noreferrer noopener\">view.xml<\/a> file and got the value of this variable in the list.phtml file inside the &lt;magento-root-directory>\/app\/design\/frontend\/Vendor\/Wtheme\/Magento_Catalog\/templates\/product\/ directory.<\/p>\n\n\n\n<p>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.<br><br><a href=\"https:\/\/github.com\/khushboowebkul\/wtheme-project\" target=\"_blank\" rel=\"noreferrer noopener\">Download the full code.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"600\" height=\"308\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/ezgif.com-gif-maker-1.gif\" alt=\"ezgif.com-gif-maker-1\" class=\"wp-image-349320\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>I have also modified some values in the <strong>gallery<\/strong>(transition on full screen and magnifier) variables. Refer to the following images for the result.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"600\" height=\"367\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/ezgif.com-gif-maker-2.gif\" alt=\"ezgif.com-gif-maker-2\" class=\"wp-image-349322\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"600\" height=\"331\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/ezgif.com-gif-maker.gif\" alt=\"ezgif.com-gif-maker\" class=\"wp-image-349324\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong><span style=\"text-decoration: underline\">JavaScript bundling in view.xml:<\/span><\/strong><\/p>\n\n\n\n<p>In the <strong>view.xml<\/strong> file, the <strong>&lt;exclude&gt;<\/strong> tag is used to list the browser resources that need to be excluded from the applied HTML page.<\/p>\n\n\n\n<p>It is used to remove files from the JavaScript bundling process.<\/p>\n\n\n\n<p><strong>JavaScript bundling<\/strong> 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.<\/p>\n\n\n\n<p><strong>Example:<\/strong> The following code will remove the files from the bundling process.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;exclude&gt;\n    &lt;item type=&quot;file&quot;&gt;Lib::jquery\/jquery.min.js&lt;\/item&gt;\n    &lt;item type=&quot;file&quot;&gt;Lib::jquery\/jquery-ui-1.9.2.js&lt;\/item&gt;\n&lt;\/exclude&gt;<\/pre>\n\n\n\n<p>For more information, check here <a href=\"https:\/\/developer.adobe.com\/commerce\/frontend-core\/guide\/themes\/configure\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.adobe.com\/commerce\/frontend-core\/guide\/themes\/configure\/<\/a><\/p>\n\n\n\n<p>Hope this will be helpful.<br>Thanks  \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8216;Wtheme&#8217; inside the &lt;magento-root-directory&gt;\/app\/design\/frontend\/Vendor directory. In this custom theme, I have created the view.xml file inside the &lt;magento-root-directory&gt;\/app\/design\/frontend\/Vendor\/Wtheme\/etc\/ directory. What is the view.xml file <a href=\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":249,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,9121],"tags":[13020,13018,13022,13021,13017],"class_list":["post-349295","post","type-post","status-publish","format-standard","hentry","category-magento","category-magento-2","tag-customization-image-orientation-using-view-xml-in-custom-theme","tag-customize-theme-in-magento-2","tag-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml","tag-image-orientation-in-custom-theme","tag-view-xml-in-custom-theme-in-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Change image orientation<\/title>\n<meta name=\"description\" content=\"In this article, we will learn how we can change image orientation and a few other things in our custom theme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Change image orientation\" \/>\n<meta property=\"og:description\" content=\"In this article, we will learn how we can change image orientation and a few other things in our custom theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-24T14:27:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T07:34:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png\" \/>\n<meta name=\"author\" content=\"Khushboo Sahu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Khushboo Sahu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\"},\"author\":{\"name\":\"Khushboo Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca\"},\"headline\":\"Magento 2 Change image orientation at frontend using view.xml\",\"datePublished\":\"2022-08-24T14:27:34+00:00\",\"dateModified\":\"2024-07-26T07:34:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\"},\"wordCount\":984,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png\",\"keywords\":[\"customization image orientation using view.xml in custom theme\",\"customize theme in magento 2\",\"How to change image orientation at frontend and other things using view.xml\",\"image orientation in custom theme\",\"view.xml in custom theme in magento 2\"],\"articleSection\":[\"magento\",\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\",\"url\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\",\"name\":\"Change image orientation\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png\",\"datePublished\":\"2022-08-24T14:27:34+00:00\",\"dateModified\":\"2024-07-26T07:34:13+00:00\",\"description\":\"In this article, we will learn how we can change image orientation and a few other things in our custom theme.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11.png\",\"width\":1309,\"height\":668,\"caption\":\"Screenshot-from-2022-08-24-18-07-11\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento 2 Change image orientation at frontend using view.xml\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca\",\"name\":\"Khushboo Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Khushboo Sahu\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/khushboo-sahu062\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Change image orientation","description":"In this article, we will learn how we can change image orientation and a few other things in our custom theme.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/","og_locale":"en_US","og_type":"article","og_title":"Change image orientation","og_description":"In this article, we will learn how we can change image orientation and a few other things in our custom theme.","og_url":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-08-24T14:27:34+00:00","article_modified_time":"2024-07-26T07:34:13+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png","type":"","width":"","height":""}],"author":"Khushboo Sahu","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Khushboo Sahu","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/"},"author":{"name":"Khushboo Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca"},"headline":"Magento 2 Change image orientation at frontend using view.xml","datePublished":"2022-08-24T14:27:34+00:00","dateModified":"2024-07-26T07:34:13+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/"},"wordCount":984,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png","keywords":["customization image orientation using view.xml in custom theme","customize theme in magento 2","How to change image orientation at frontend and other things using view.xml","image orientation in custom theme","view.xml in custom theme in magento 2"],"articleSection":["magento","Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/","url":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/","name":"Change image orientation","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11-1200x612.png","datePublished":"2022-08-24T14:27:34+00:00","dateModified":"2024-07-26T07:34:13+00:00","description":"In this article, we will learn how we can change image orientation and a few other things in our custom theme.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/08\/Screenshot-from-2022-08-24-18-07-11.png","width":1309,"height":668,"caption":"Screenshot-from-2022-08-24-18-07-11"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/understanding-magento-theme-how-to-change-image-orientation-at-frontend-and-other-things-using-view-xml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2 Change image orientation at frontend using view.xml"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca","name":"Khushboo Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Khushboo Sahu"},"url":"https:\/\/webkul.com\/blog\/author\/khushboo-sahu062\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/349295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=349295"}],"version-history":[{"count":14,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/349295\/revisions"}],"predecessor-version":[{"id":454879,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/349295\/revisions\/454879"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=349295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=349295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=349295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}