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!