Fotorama Gallery - How to minimize the frame size for product base image

Question

I'm struggling to minimize the frame width and height for the product base image gallery (Fotorama).

I have inspected the browser code and noticed that if I change the following width and height the related Fotorama Frame size change however, did not found the actual location to customized the white border size (width and height):

<div class="fotorama__stage" data-fotorama-stage="fotorama_stage" style="**width: 707px; height: 707px;**">

<div class="fotorama__stage__shaft fotorama__grab" tabindex="0" data-gallery-role="stage-shaft" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); margin-left: 0px; width: 707px;">

Basically when I change the above width: 707px; height: 707px; through browser inspect I can see the changes but no where found the actual file or location to change the value.

Answer 1

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

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

Please Change Option Value in

app/design/frontend/Magento/Luma/Magento_Catalog/templates/product/view/gallery.phtml

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

Thanks

Answer 2

Watch out for the , after your value. Its not needed if you add it as the last option.

"options": {
                "something": "value",
                "maxheight": "700" // Add your value here
           }