How to Add Lazy Loading to Page Builder Images in Magento 2

In this tutorial, Today I will explain to how to add lazy loading to page builder images in Magento 2. From Magento 2.4.3, Page builder will be available for open source community. When you will be create page using page builder and upload image on that page at that time, by default lazy loading is missing in page builder.

So, In page speed performance it will display images list inside defer offscreen images. To solve this images list and increase page speed of that page you need to add loading=”lazy” attribute in that image tag.

You may also like this :

For that you need to follow this below way :

1) Using Theme Way :

Let’s assume that you have created custom admin theme. Now, You need to add this below code at app/design/adminhtml/RH/CustomTheme/Magento_PageBuilder/web/template/content-type/image/full-width/master.html file :

Copy Code


<ifnot args="data.link.attributes().href">
   <img if="data.desktop_image.attributes().src"
        attr="data.desktop_image.attributes"
        class="pagebuilder-mobile-hidden"
        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"
        css="data.mobile_image.css"
        ko-style="data.mobile_image.style" loading="lazy"/>
</ifnot>

You need to replace this above code inside master.html file. Now, You can upload images inside page builder and save that pages or block.

2) Using Module Way :

Let’s assume that you have simple module. Now, you need to create app/code/RH/Helloworld/view/adminhtml/pagebuilder/content_type/image.xml file and paste the below code :

Copy Code


<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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">
        <children default_policy="deny"/>
        <appearances>
            <appearance default="true"
                        name="full-width"
                        preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
                        master_template="RH_Helloworld/content-type/image/full-width/master"
                        reader="Magento_PageBuilder/js/master-format/read/configurable">
                <elements>
                    <element name="main">
                        <style name="text_align" source="text_align"/>
                        <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
                        <attribute name="name" source="data-content-type"/>
                        <attribute name="appearance" source="data-appearance"/>
                        <css name="css_classes"/>
                    </element>
                    <element name="desktop_image">
                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
                        <style name="border_color" source="border_color"/>
                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                        <static_style source="max-width" value="100%"/>
                        <static_style source="height" value="auto"/>
                        <attribute name="image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                        <attribute name="alt" source="alt"/>
                        <attribute name="title_attribute" source="title"/>
                    </element>
                    <element name="mobile_image">
                        <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
                        <style name="border_color" source="border_color"/>
                        <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                        <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                        <static_style source="max-width" value="100%"/>
                        <static_style source="height" value="auto"/>
                        <attribute name="mobile_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                        <attribute name="alt" source="alt"/>
                        <attribute name="title_attribute" source="title"/>
                    </element>
                    <element name="link">
                        <attribute name="link_url" reader="Magento_PageBuilder/js/property/link" persistence_mode="read"/>
                        <attribute name="virtual_link_href" storage_key="link_url" source="href" converter="Magento_PageBuilder/js/converter/attribute/link-href" persistence_mode="write"/>
                        <attribute name="virtual_link_target" storage_key="link_url" source="target" converter="Magento_PageBuilder/js/converter/attribute/link-target" persistence_mode="write"/>
                        <attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
                        <attribute name="title_attribute" source="title"/>
                    </element>
                    <element name="empty_link"/>
                    <element name="caption">
                        <html name="image_caption" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
                    </element>
                </elements>
                <converters>
                    <converter component="Magento_PageBuilder/js/mass-converter/empty-mobile-image" name="empty_mobile_image">
                        <config>
                            <item name="desktop_image_variable" value="image"/>
                            <item name="mobile_image_variable" value="mobile_image"/>
                        </config>
                    </converter>
                </converters>
            </appearance>
        </appearances>
        <additional_data>
            <item name="uploaderConfig" xsi:type="array">
                <item name="maxFileSize" xsi:type="object">ImageMaxFileSizeDesktop</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
                <item name="component" xsi:type="string">Magento_PageBuilder/js/form/element/image-uploader</item>
                <item name="componentType" xsi:type="string">imageUploader</item>
                <item name="dataScope" xsi:type="string">image</item>
                <item name="formElement" xsi:type="string">imageUploader</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\SaveUrl</item>
                </item>
                <item name="previewTmpl" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview</item>
                <item name="template" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview/image</item>
                <item name="mediaGallery" xsi:type="array">
                    <item name="openDialogUrl" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\OpenDialogUrl</item>
                    <item name="openDialogTitle" xsi:type="string" translate="true">Insert Images...</item>
                    <item name="initialOpenSubpath" xsi:type="string">wysiwyg</item>
                    <item name="storeId" xsi:type="object">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\StoreId</item>
                </item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </additional_data>
    </type>
</config>

Then, You need to create app/code/RH/Helloworld/view/adminhtml/web/template/content-type/image/full-width/master.html file and paste the below code :

Copy Code


<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<figure attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), !data.desktop_image.attributes().src ? {} : {borderStyle: 'none'})" css="data.main.css">
    <a if="data.link.attributes().href" attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
        <img if="data.desktop_image.attributes().src"
             attr="data.desktop_image.attributes"
             class="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="pagebuilder-mobile-only"
             css="data.mobile_image.css"
             ko-style="data.mobile_image.style" />
    </a>

    <ifnot args="data.link.attributes().href">
        <img if="data.desktop_image.attributes().src"
             attr="data.desktop_image.attributes"
             class="pagebuilder-mobile-hidden"
             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"
             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>
</figure>

That’s it !!!

Output :

I hope this blog is easy to understand about how to add lazy loading to page builder images in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing !!

Post Views: 6,100