magentofrontendmagento2customizationcatalog

How to extend galley.phtml in Magento2?


I want to add custom code in gallery.phtml in the PDP section on my custom module. I tried this=> called default the block in catalog_product_view.xml

<referenceBlock name="product.info.media.image">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Ajith_Mymodule::product/view/gallery.phtml</argument>
            </action>
        </referenceBlock>

loaded gallery.phtml with and without default code, nothing works well for me. Am I'm trying the correct method or did anybody give me the idea to do this?


Solution

  • This method is working properly

    <?php
    /**
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
     */
    
    /**
     * Product media data template
     *
     * @var $block \Magento\Catalog\Block\Product\View\Gallery
     */
    ?>
    
    <?php
    $images = $block->getGalleryImages()->getItems();
    $mainImage = current(array_filter($images, function ($img) use ($block) {
        return $block->isMainImage($img);
    }));
    
    if (!empty($images) && empty($mainImage)) {
        $mainImage = $block->getGalleryImages()->getFirstItem();
    }
    
    $helper = $block->getData('imageHelper');
    $mainImageData = $mainImage ?
        $mainImage->getData('medium_image_url') :
        $helper->getDefaultPlaceholderUrl('image');
    
    ?>
    
    <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
        <img
            alt="main product photo"
            class="gallery-placeholder__image"
            src="<?= /* @noEscape */ $mainImageData ?>"
        />
    </div>
    
    <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>
    

    call this in our custom template