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!

• Mehul Chaudhari: you can use this extension to get this functionality github.com/5mehulhelp5/Magento-2-Extensions/tree/main/…

Answer 1

I've written a small module to help fix this issue

https://github.com/develodesign/magento-module-pagebuilder-lazyload-images

composer require develodesign/magento-module-pagebuilder-lazyload-images

bin/magento module:enable Develodesign_PagebuilderLazyLoadImages

bin/magento setup:upgrade

bin/magento cache:flush

• Max.A: Fine module, uses it but not for background images

Answer 2

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