Magento 2 - add lazy loading to pagebuilder images

Question

I already have lazyloading in place for category product images. I added a script to the head, added a class "lazyload" to each image, and changed the src to data-src. This works perfectly.

I am now trying to change this for pagebuilder images.

so far, I have created my own module and added a class to the image.

File app\code\module\Lazyload\view\adminhtml\web\template\content-type\image\full-width\master.html

I edited the class attribute to include "lazyload"

Code snippet:

<img if="data.desktop_image.attributes().src"
             attr="data.desktop_image.attributes"
             class="lazyload pagebuilder-mobile-hidden"
             css="data.desktop_image.css"
             ko-style="data.desktop_image.style" />
        <img if="data.mobile_image.attributes().src"
             attr="data.mobile_image.attributes"
             class="lazyload pagebuilder-mobile-only"
             css="data.mobile_image.css"
             ko-style="data.mobile_image.style" />

All that is left to do is change the src to a data-src, but I am unsure where to change this. I tested editing view\adminhtml\pagebuilder\content_type\image.xml, but have been failing in implementation.

Any help would be appreciated.

Thanks!

Answer 1

Hi @meweb432344 and guys

I write something here if anyone meets the same problem. In order to add lazy into pagebuilder. Please follow up steps here:

1. Create a new backend theme(mine: [vendor]/backend) app/design/adminhtml/[vendor]/backend/theme.xml

    <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>[Theme Name]</title>
    <parent>Magento/backend</parent>
   

2. Add master.html into the new theme: app/design/adminhtml/[vendor]/backend/Magento_PageBuilder/web/template/content-type/image/full-width/master.html

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

3. Create a custom module to active the backend theme and customize layout for lazy

3.1. File module.xml(app/code/[Vendor]/Backend/etc/module.xml)

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[Vendor]_Backend" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
            <module name="Magento_Enterprise"/>
            <module name="Magento_PageBuilder"/>
        </sequence>
    </module>
</config>

3.2. File di.xml(app/code/[Vendor]/Backend/etc/di.xml)

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Theme\Model\View\Design">
        <arguments>
            <argument name="themes" xsi:type="array">
                <item name="adminhtml" xsi:type="string">[Vendor]/backend</item>
            </argument>
        </arguments>
    </type>
</config>

4. Add layout for file image.xml(app/code/[Vendor]/Backend/view/adminhtml/pagebuilder/content_type/image.xml)

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
        <type name="image"
              label="Image"
              component="Magento_PageBuilder/js/content-type"
              preview_component="Magento_PageBuilder/js/content-type/image/preview"
              form="pagebuilder_image_form"
              menu_section="media"
              icon="icon-pagebuilder-image"
              sortOrder="1"
              translate="label">
            <appearances>
                <appearance default="true"
                            name="full-width"
                            preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
                            master_template="Magento_PageBuilder/content-type/image/full-width/master"
                            reader="Magento_PageBuilder/js/master-format/read/configurable">
                    <elements>
                        <element name="desktop_image">
                            <attribute name="mobile_image" source="data-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                        </element>
                        <element name="mobile_image">
                            <attribute name="mobile_image_data_src" source="data-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                        </element>
                    </elements>
                    <converters>
                        <converter component="Magento_PageBuilder/js/mass-converter/empty-mobile-image" name="empty_mobile_image">
                            <config>
                                <item name="mobile_image_data_src_variable" value="mobile_image_data_src"/>
                            </config>
                        </converter>
                    </converters>
                </appearance>
            </appearances>
        </type>
    </config>
   

There is a new attribute named "mobile_image_data_src" in the above code.

5. Declare the new attribute: app/code/[Vendor]/Backend/view/adminhtml/ui_component/pagebuilder_image_form.xml

    <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
        <fieldset name="general" sortOrder="20">
            <field name="mobile_image_data_src" formElement="imageUploader">
                <settings>
                    <label translate="true">Mobile Image</label>
                    <componentType>imageUploader</componentType>
                </settings>
                <formElements>
                    <imageUploader>
                        <settings>
                            <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                            <maxFileSize>2097152</maxFileSize>
                            <uploaderConfig>
                                <param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
                            </uploaderConfig>
                            <previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
                        </settings>
                    </imageUploader>
                </formElements>
            </field>
        </fieldset>
    </form>
   

6. Add value for the new field. Copy file empty-mobile-image.js from core into the new Backend theme: app/design/adminhtml/[Vendor]/backend/Magento_PageBuilder/web/js/mass-converter/empty-mobile-image.js

   ###Keep code here###

        _proto.toDom = function toDom(data, config) {
          var mobileImage = (0, _object.get)(data, config.mobile_image_variable);
   
          if (mobileImage === undefined || mobileImage[0] === undefined) {
            (0, _object.set)(data, config.mobile_image_variable, (0, _object.get)(data, config.desktop_image_variable));
            (0, _object.set)(data, config.mobile_image_data_src_variable, (0, _object.get)(data, config.desktop_image_variable));//Add value for the new field.
          }
   
          return data;
        };
   
        ###Keep code here###
   

I assign the value of desktop_image_variable to variable mobile_image_data_src_variable

Answer 2

@Vincent Le Hi Vincent Is this lazy load function will be added in PageBuilder like this image below. I was following this guide and it is create it me a Pagebuilder extension directory in the app/code folder but yours are in app/desing.