How to extend galley.phtml in Magento2? - magento

Question

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?

Answer 1

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

Answer 2

If we take a look:
vendor/magento/module-product-video/Observer/ChangeTemplateObserver.php
We can see that this template will be added via Observer event. So, we need to disable this observer event in our module. And then, try to add our custom template.
Vendor/Module/etc/events.xml
<event name=""catalog_product_gallery_prepare_layout"">
<observer name=""change_template"" disabled=""true""/>
<observer name=""custom_change_template"" instance=""Vendor\Module\Observer\ChangeTemplateObserver"" />
</event>
Vendor/Module/Observer/ChangeTemplateObserver.php
<?php
namespace Vendor\Module\Observer;
use Magento\Framework\Event\ObserverInterface;
class ChangeTemplateObserver implements ObserverInterface
{
public function execute(\Magento\Framework\Event\Observer $observer)
{
$observer->getBlock()->setTemplate('Vendor_Module::helper/gallery.phtml');
}
}