Magento 2 - How to replace webP image in Fotorama JS

Question

I am trying to add picture tag to give control to browser to display either webP image or actual image based on the supported version.

Can you please help how to add it in fortorma.js

Thankyou

Answer 1

<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>
    require([
        'jquery'
    ], function ($) {
        $(function () {
            let $placeholder = $('.gallery-placeholder');
            let gallery = null;

            $placeholder.on('gallery:loaded', function () {
                gallery = $placeholder.data('gallery');
            });

            $('.radio .item').on('click', function(){
                $('.radio .item').removeClass('selected');
                $(this).addClass('selected');

                if (gallery) {
                    let images = $(this).find('script').html();
                    if (images) {
                        // this should replace the existing images...
                        gallery.updateData(JSON.parse(images));
                    }
                }
            });
        });
    });
</script>