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.

1
  • Any solution for this? Oct 26 '17 at 0:39
8

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

            }
    }
}

2
  • perfect answer with explanation! Made my day :) +1 Feb 27 '20 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 '20 at 12:58
3

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.
    – BrianVPS
    Jun 6 '18 at 1:53
  • 1
    You have to rebuild image library afterwards
    – adyry
    Jul 5 '18 at 14:21
  • it's not working Apr 2 at 14:51
1

Refer to this site all about gallery widget information

https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_gallery.html#options

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

~

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.