6

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.

  • Any solution for this? – CompactCode Oct 26 '17 at 0:39
6

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

            }
    }
}

| improve this answer | |
  • perfect answer with explanation! Made my day :) +1 – SagarPPanchal Feb 27 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 – Vinit Kumar Apr 17 at 12:58
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).

| improve this answer | |
  • 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
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

| improve this answer | |
0

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>
| improve this answer | |
0

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!

| improve this answer | |

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.