3

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!

Improve this question
1

2 Answers 2

Reset to default
4

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

Improve this answer
1
  • Fine module, uses it but not for background images Commented May 12 at 18:02
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

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.