Changing Magento 2 Page Builder Images to use <picture> and srcset

Question

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?

Answer 1

You need also to overwrite the master_template like:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="image">
        <appearances>
            <appearance default="true" name="full-width" 
                        preview_template="Vendor_PageBuilder/content-type/image/full-width/preview"
                        master_template="Vendor_PageBuilder/content-type/image/full-width/master">
                
            </appearance>
        </appearances>
    </type>
</config>

https://github.com/magento/magento2-page-builder/blob/develop/app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/image.xml

Answer 2

You can set up the srcset attribute adding a new element in app/code/[Vendor]/[ModuleName]/view/adminhtml/pagebuilder/content_type/image.xml, for example:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
<type name="image">
    <appearances>
        <appearance default="true"
                    name="full-width"
                    master_template="[Vendor]_[ModuleName]/content-type/image/full-width/master">
            <elements>
                <element name="source_srcset">
                    <attribute name="image" source="srcset" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                </element>
            </elements>
        </appearance>
    </appearances>
</type>

After that, you should update your "source" tags in app/code/[Vendor]/[ModuleName]/view/adminhtml/web/template/content-type/image/full-width/master.html:

<source media="(max-width:767px)" 
        attr="data.source_srcset.attributes"> 

The data binding "attr="data.source_srcset.attributes" will add the srcset attribute to the "source" tag.