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?

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
           }
        }
    }
}

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.

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

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;
}

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.

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>

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%;
}