0

I want to load the product_page_main_image (which is larger) rather than the product_page_image_medium when you click the Fotorama Gallery. This will give me a higher quality image because it's higher resolution.

I have changed the values in my /Magento_Catalog/templates/product/view/gallery.phtml but it altered the size of the HTML element, not the actual image loaded (which was still the medium version).

Here is my gallery.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Product media data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\Gallery
 */
?>
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">
            <img src="<?= /* @escapeNotVerified */ $block->getViewFileUrl('images/loader-1.gif') ?>"
                 alt="<?= /* @escapeNotVerified */ __('Loading...') ?>">
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>,
                "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>,
                "options": {
                    "nav": "thumbs",
                    "loop": true,

                    "keyboard": true,
                    "arrows": true,
                    "allowfullscreen": true,
                    "showCaption": false,
                    "width": "<?= /* @escapeNotVerified */ $block->getImageAttribute('product_page_image_medium', 'width') ?>",
                    "thumbwidth": "52",

                    "thumbheight": "52",
                    "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                    ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,

                    "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>,

                    "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>",
                    "navarrows": true,
                    "navtype": "slides",
                    "navdir": "horizontal"
                },

                "fullscreen": {
                    "nav": "dots",
                    "loop": true,
                    "navdir": "horizontal",
                    "navarrows": true,
                    "navtype": "slides",
                    "arrows": true,
                    "showCaption": false,
                    "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>,
                    "transition": "true"
                },

                "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?>
            }
        }
    }
</script>

Your Answer

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