8

How can I change height in the below code on Product detail page

<div class="fotorama__stage" data-fotorama-stage="fotorama__stage" style="width: 462px; height: 372px;">

I have tried below code in app/design/frontend/Custom/mytheme/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="category_page_grid" type="small_image">
                <width>280</width>
                <height>400</height>
            </image>
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>870</width>
                <height>700</height>
            </image>
            <image id="product_page_main_image" type="image">
                <width>870</width>
                <height>700</height>
            </image>
            <image id="product_page_main_image_default" type="image">
                <width>870</width>
                <height>700</height>
            </image>
        </images>
    </media>
</view>

It is only changing the image size and not the div size.

2

7 Answers 7

9

You will have to override vendor/magento/module-catalog/view/frontend/templates/product/gallery.phtml file by putting it into app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product/view/gallery.phtml with following code change.

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            ...
            ...
            ...
            "options": {
                ...,
                ...,
                ...,
                "maxheight": "350", //Change max-height that you want to set

            }
    }
}

3
  • perfect answer with explanation! Made my day :) +1 Feb 27, 2020 at 10:07
  • @rizwan not working i have update gallery.phtml and tried with view.xml . Product images size is updated as view.xml file but <div class="fotorama__stage" data-fotorama-stage="fotorama__stage" style="width: 358px; height: 318px;"> the style wont change Apr 17, 2020 at 12:58
  • I added maxwidth and maxheight to \Magento\Catalog\Block\Product\View\GalleryOptions. magesystem.net/blog/post/…
    – apedic
    Oct 12, 2023 at 22:44
4

in Magento_Catalog::product/view/gallery.phtml you can see config for gallery:

var config = {
        "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
        ...
        "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
    }...

as you can see, width & height points to product_page_image_medium image size. Head over (or add id from the theme you inherit) to YourTheme/etc/view.xml and change

<image id="product_page_image_medium" type="image">
            <width>590</width>
            <height>800</height>
</image>

to your needs. Or you can just change it in config (could cause problems).

3
  • 2
    Even with these changes it won't resize the stage UNLESS you resize the <div class="product-info-main"> and <div class="product media"> elements in the main content area. The stage sizes to fit the available space so the image will be floating in the middle unless you resize the columns.
    – Mageician
    Jun 6, 2018 at 1:53
  • 1
    You have to rebuild image library afterwards
    – adyry
    Jul 5, 2018 at 14:21
  • it's not working Apr 2, 2021 at 14:51
1

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>
0
1

I know this is kind of late, but for future devs: you have to change this in the fotorama.js file. You can set your height modifying these values:

/**
         * Set height for gallery
         * Default value - height of first image
         * Number - set value in px
         * String - set value in quotes
         *
         */
        height: null,

        /**
         * Set min-height for gallery
         *
         */
        minheight: null,

        /**
         * Set max-height for gallery
         *
         */
        maxheight: null,

I also suggest you copy the file lib/fotorama/fotorama.js to your theme_folder/web/fotorama/fotorama.js

I hope this helps!

1

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

require(['jquery', 'mage/gallery/gallery'], function($, gallery){

    $('[data-gallery-role=gallery-laceholder]').on('gallery:loaded', function () {
        if($(window).width() > 768){
            $(this).on('fotorama:ready', function(){
                var  api = $(this).data('gallery');
                $('.fotorama__stage').css('height','500px')
                $('.fotorama__stage').css('width','500px')
            });
        }
    });
});

~

1

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

<script>
require(['jquery', 'mage/gallery/gallery'], function($, gallery){
    $(document).on('click', function() {
        if (!$('body').hasClass("fotorama__fullscreen")) {
            $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
                $(this).on('fotorama:load', function(){
                   var newHeight = jQuery('.fotorama__stage__frame.fotorama__active img').prop('naturalHeight') + 'px';
                    jQuery('.fotorama__stage').css('max-height',newHeight);
                });
                $(this).on('fotorama:showend', function(){
                   var newHeight = jQuery('.fotorama__stage__frame.fotorama__active img').prop('naturalHeight') + 'px';
                    jQuery('.fotorama__stage').css('max-height',newHeight);
                });
            });
        }
    });
});
1

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

.fotorama__stage {
    max-height: 80%;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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