2

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!

1 Answer 1

0

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>
  1. 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.

  1. 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>
    
  2. 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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