0

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?

2 Answers 2

0

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.