Skip to content

Resize fullscreen images width in fotorama

I have tried to resize the images in fullscreen fotorama, but it does not work.

enter image description here

enter image description here

I have seen that fullscreen does not have width as a property and I have added it but it does not work

GalleryOptions.php

/**
 * Retrieve gallery fullscreen options in JSON format
 *
 * @return string
 * @SuppressWarnings(PHPMD.CyclomaticComplexity)
 * @SuppressWarnings(PHPMD.NPathComplexity)
 * @SuppressWarnings(PHPMD.ElseExpression)
 */
public function getFSOptionsJson()
{
    $fsOptionItems = null;

    //Special case for gallery/nav which can be the string "thumbs/false/dots"
    if (is_bool($this->getVar("gallery/fullscreen/nav"))) {
        $fsOptionItems['nav'] = $this->getVar("gallery/fullscreen/nav") ? 'true' : 'false';
    } else {
        $fsOptionItems['nav'] = $this->escapeHtml($this->getVar("gallery/fullscreen/nav"));
    }

    $fsOptionItems['loop'] = $this->getVar("gallery/fullscreen/loop");
    $fsOptionItems['navdir'] = $this->escapeHtml($this->getVar("gallery/fullscreen/navdir"));
    $fsOptionItems['navarrows'] = $this->getVar("gallery/fullscreen/navarrows");
    $fsOptionItems['navtype'] = $this->escapeHtml($this->getVar("gallery/fullscreen/navtype"));
    $fsOptionItems['arrows'] = $this->getVar("gallery/fullscreen/arrows");
    $fsOptionItems['showCaption'] = $this->getVar("gallery/fullscreen/caption");

    if ($this->getVar("gallery/fullscreen/transition/duration")) {
        $fsOptionItems['transitionduration'] = (int)$this->escapeHtml(
            $this->getVar("gallery/fullscreen/transition/duration")
        );
    }

    $fsOptionItems['transition'] = $this->escapeHtml($this->getVar("gallery/fullscreen/transition/effect"));

    if ($this->getVar("gallery/fullscreen/keyboard")) {
        $fsOptionItems['keyboard'] = $this->getVar("gallery/fullscreen/keyboard");
    }

    if ($this->getVar("gallery/fullscreen/thumbmargin")) {
        $fsOptionItems['thumbmargin'] =
            (int)$this->escapeHtml($this->getVar("gallery/fullscreen/thumbmargin"));
    }

    $fsOptionItems['width'] = (int)$this->escapeHtml(
        $this->gallery->getImageAttribute('product_page_main_image', 'width')
    );
    MagentoFrameworkAppObjectManager::getInstance()->get('PsrLogLoggerInterface')->log(100,print_r($fsOptionItems,true));
    return $this->jsonSerializer->serialize($fsOptionItems);
}

view.xml

<var name="fullscreen">
            <var name="nav">false</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
            <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
            <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
            <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
            <var name="width">580</var> <!-- Width in fullscreen -->
            <var name="height">580</var> <!-- Height in fullscreen -->
            <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            <var name="transition">
                <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
                <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            </var>
        </var>

gallery.phtml

"fullscreen": {
                "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
                "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                "arrows": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>",
                "showCaption": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>",
                "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>",
                "width": <?php /* @escapeNotVerified */ echo $fs_image_width; ?>
            }

$fs_image_width = 580;
product_page_main_image = 580;

Neither option has worked

Thanks!