Magento 2 - Fotorama

Question

I have a problem with the ProductSlider on the Productdetail Page. I dont know how to set the Container width & heights.

I found some configuration for the Fotorama Plugin but there is nothing about width and height.

My Productimages have another dimensions.

<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">

that are the dimensions from the Plugin.

My image dimensions are 530px x 350px, so there is too much white-space (top/bottom).

Any ideas?

Hydro

Answer 1

You have to edit the following file: app/design/vendor/Magento_Catalog/templates/product/view/gallery.phtml

Here you can add your options

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
            "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
            "options": {
                "maxheight": "700", // Add your value here
           }
        }
    }
}

Lousewort

Answer 2

Overwrite vendor\magento\theme-frontend-luma\etc\view.xml

I have the following, for example: app\design\frontend\[CustomTheme]\default\etc\view.xml

<?xml version="1.0"?>

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>700</width>
                <height>420</height>
            </image>

            <image id="product_page_main_image" type="image">
                <width>700</width>
                <height>420</height>
            </image>

            <image id="product_page_main_image_default" type="image">
                <width>700</width>
                <height>420</height>
            </image>
        </images>
    </media>
</view>

This will cause the fotorama__stage to be smaller - it adjusts based on the image size.

Overskirt

Above code is changing the size of the image but not for the div <div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;"> – Patric

Make sure you flush all cache. I'm pretty sure the div did shrink on the project I was working on, as that was my intent. I will have to try to remember what project this was and see for sure, but I would start by ensuring all of your cache is flushed. – Overskirt

Yes, I have all the cache and cleared pub directory as well. – Patric

Hey - I did check this and it did change the size of the container as well. I'm not sure if extra CSS was needed for that. Unfortunately I no longer work with Magento, so I can't look back and give you more specifics. – Overskirt

Answer 3

Solution from Florin Marin worked for me but without changing width of fotorama, so I was digging more and for me - best result was adding this to my less theme file _theme.less

        .page-layout-2columns-right .product.media {
                width: 20%
}
        .page-layout-2columns-right .product-info-main {
                width: 78%;
}

I change also size of images in app/design/frontend/[Custom_Vendor]/[CustomTheme]\etc\view.xml same like adpro in his answer.

 <images module="Magento_Catalog">
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>150</width>
                <height>150</height>
            </image>

            <image id="product_page_main_image" type="image">
                <width>150</width>
                <height>150</height>
            </image>

            <image id="product_page_main_image_default" type="image">
                <width>150</width>
                <height>150</height>
            </image>
        </images>

in developer mode delete pub/static/frontend/* and after changes in xml file resize images: php bin/magento catalog:images:resize

Winburn

Answer 4

Add this to your LESS/CSS file and clear the cache.

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

Sula

Answer 5

I will show how it is done properly, but keep in mind that this does not support all options, so you also have to extend the block class and add support for the missing options by yourself if you need to use them!

The config is saved in

theme-frontend-blank/etc/view.xml:

...
<vars module="Magento_Catalog">

    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
        <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
        <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
        ...

Copy the view.xml into your own theme and overwrite that part.

You should change these variables instead.

You can find all possible options in the fotorama documentation.

Floriated

Answer 6

This solution worked for me, hope it will help others as well.

Place this code just after your code in gallery.phtml file

<script type="text/javascript">
    require(
    [
        'jquery',
        'jquery/ui'
    ],
    function(
        $
    ) {
        $(window).load(function(){
            console.log("readyyy");
            $(".fotorama__stage").height($(".fotorama__img").height());

            $( window ).resize(function() {
                console.log("resize");
              $(".fotorama__stage").height($(".fotorama__img").height());
            });
        })
    });
</script>

Tait

Answer 7

I tried all these solutions but didn't work. I was able to solve this by adding the below CSS

.fotorama__stage {
    max-height: 80%;
}

Misreport