How To

How to set image gallery Fotorama thumbnail as vertical view in Magento 2

Hello, Magento folks,

Last time we learned how you can create custom UI Component using knowckout.js in Magento 2.

Today, we are going to learn how you can change thumbnail in image gallery fotorama for any product page from horizontal to vertical.

Sometimes there are images that look better when their alignment is set as vertical rather than horizontal. You might want to change that, but you found no solution for that.

Well, we are here to solve the issue you are having. With the help of view.xml file for a gallery that is used by Magento, you can shift the view of your images from horizontal to vertical and vice-versa as you need.

Follow the instructions given below to set gallery fotorama thumbnail as a vertical view on the product view page.

Find a variable named navdir at given below path:

app\design\frontend\Themes\Yourtheme\etc\view.xml

In this file, you can see a variable navdir search under <var name= “gallery”> tag.

You need to replace the below code:

<var name="navdir">horizontal</var>

With this code

<var name="navdir">vertical</var>

You can define your own custom view in the same file at the given path.

You can also set your custom view on mobile devices as well. To do that you need to define the condition for mobile in the available breakpoint variable. Change the alignment of image thumbnail as vertical or horizontal by placing navdir variable, as shown below.

<var name="breakpoints">
<var name="mobile">
<var name="conditions">
<var name="max-width">767px</var>
</var>
<var name="options">
<var name="options">
<var name="navdir">vertical</var>
</var>
</var>
</var>
</var>

So, this was it. Using this you can set the thumbnail of fotorama gallery image as vertical. You can do this mobile too. If you have any problem while implementation, then contact our support team for help. We will be happy to help you. Lastly, if you like this article, then let us know in the comments below. Also, make sure that you share this with your Magento colleagues and friends.

Happy Reading!

Click to rate this post!
[Total: 15 Average: 4.9]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

View Comments

Recent Posts

What are Net Sales? How to Calculate Your Net Sales?

In the world of business, understanding financial metrics is crucial for making informed decisions and…

1 day ago

Magento 2 Extensions Digest April 2024 (New Release & Updates)

Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…

1 day ago

The ABCs of Geofencing: Definition, Features and Uses

In this era, businesses are always on the lookout for ways to engage with their…

2 days ago

How to Delete Product Variant in a Shopify Remix App using GraphQL Mutations?

Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…

3 days ago

6 Innovative Tools Revolutionizing E-Commerce Operations

E-commerce has transformed the way consumers shop for products and services and interact with businesses.…

5 days ago

How Upcoming Cookie Changes Will Affect Your E-commerce Website?

The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…

5 days ago