1

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.

2

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

  • Thanks Moin Malek, it's only change the base image size not the frame or white border width & height. My only concern is to minimised the white extra space not the image size... – Alam Nov 1 '17 at 8:15
  • Hello @Alam Please Find edited answer – Moin Malek Nov 1 '17 at 8:51
  • Thank you so much for your suggested code it is working for the height but not width. I wanted H: 515 and W: 515. Very appreciated. – Alam Sep 5 '18 at 10:27
0

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
           }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.