Skip to content

Changing Magento 2 Page Builder Images to use and srcset

I am trying to change the magento2 page builder image to include picture and source set tag.

I made a module

app/code/[Vendor]/PageBuilder/view/adminhtml/web/template/content-type/image/full-width/master.html

I want to changed this code:

<figure attr="data.main.attributes" ko-style="Object.assign({}, data.main.style())" css="data.main.css">
    
        <a if="data.link.attributes().href" attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
            <img attr="data.desktop_image.attributes"
                class="pagebuilder-mobile-hidden"
                css="data.desktop_image.css"
                ko-style="data.desktop_image.style" />
            <img attr="data.mobile_image.attributes"
                class="pagebuilder-mobile-only"
                css="data.mobile_image.css"
                ko-style="data.mobile_image.style" />
        </a>

        <ifnot args="data.link.attributes().href">
            <img attr="data.desktop_image.attributes"
                class="pagebuilder-mobile-hidden"
                css="data.desktop_image.css"
                ko-style="data.desktop_image.style"/>
            <img attr="data.mobile_image.attributes"
                class="pagebuilder-mobile-only"
                css="data.mobile_image.css"
                ko-style="data.mobile_image.style" />
        </ifnot>
     
    <figcaption if="data.caption.html()"
        attr="data.caption.attributes"
        css="data.caption.css"
        html="data.caption.html"
        ko-style="data.caption.style">
    </figcaption>

</figure>

to this:

<figure attr="data.main.attributes" ko-style="Object.assign({}, data.main.style())" css="data.main.css">
    <picture>
        <a if="data.link.attributes().href" attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
            <source media="(max-width:767px)" 
                    srcset=" "  > 

            <img attr="data.desktop_image.attributes"
                class="src_set_image"
                css="data.desktop_image.css"
                ko-style="data.desktop_image.style" />
        </a>

        <ifnot args="data.link.attributes().href">
            <source media="(max-width:767px)"  srcset=" " > 

            <img attr="data.desktop_image.attributes"
                class="src_set_image"
                css="data.desktop_image.css"
                ko-style="data.desktop_image.style" />

        </ifnot>
    </picture>

    

    <figcaption if="data.caption.html()"
        attr="data.caption.attributes"
        css="data.caption.css"
        html="data.caption.html"
        ko-style="data.caption.style">
    </figcaption>
</figure>

How can I set it up so that srcset pull in the mobile image url?