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

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 2

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 3

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.