<?php
/**
 * Copyright 2015 Adobe
 * All Rights Reserved.
 */

/**
 * Product media data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\Gallery
 * @var $escaper \Magento\Framework\Escaper
 */
?>

<?php
$imageWidth = $block->getImageAttribute('product_page_image_medium', 'width');
$imageHeight = $block->getImageAttribute('product_page_image_medium', 'height');
$mainImageData = $block->getViewModel()->getMainProductImage();
?>

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src="<?= /* @noEscape */ $mainImageData ?>"
        <?= $imageWidth ? 'width="'. $escaper->escapeHtmlAttr($imageWidth) .'"' : '' ?>
        <?= $imageHeight ? 'height="'. $escaper->escapeHtmlAttr($imageHeight) .'"' : '' ?>
    />
    <link itemprop="image" href="<?= /* @noEscape */ $mainImageData ?>">
</div>
<?php // phpcs:ignore Magento2.Legacy.PhtmlTemplate ?>
<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
                "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                 "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
            }
        }
    }
</script>
