How to position Fotorama in Magento 2 and avoid white space around the image

Fotorama is a jQuery plugin which is used in Magento pretty often. Unfortunately, when it comes to customization, it gets tough.

In this case the problem was as follows: product images (single product page) are shown with Fotorama plugin, but as soon as the image is not square or has a poor resolution, Fotorama adds on annoying white space around it, making image appear something like that:

But we would like to see it like this:

To put it simply, the image must always start from the top of the fotorama stage.

The solution is simpler than it seems. All it requires is some CSS and XML changes.

First, search for view.xml file in app/design/frontend/your_vendor/your_name/etc/view.xml. The location of the file might be different, so check that with your setup. All you need to change there is default product image size. In the file search for tags with ids: “product_page_image_medium”“product_page_main_image”, “product_page_main_image_default” and comment out/delete tag and its contents.

After that edit CSS/LESS file within your folder.

.product .fotorama__stage__frame .fotorama__img {
       top: 0 !important;
       transform: none !important;
       -webkit-transform: none !important;
       position: static;
       margin-top: auto !important;
}

Let us know if it works!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s