├── screen.png
├── registration.php
├── etc
    └── module.xml
├── composer.json
├── README.md
└── view
    └── adminhtml
        ├── pagebuilder
            └── content_type
            │   └── image.xml
        └── ui_component
            └── pagebuilder_image_form.xml


/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/develodesign/magento-module-pagebuilder-lazyload-images/HEAD/screen.png


--------------------------------------------------------------------------------
/registration.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | 
 8 | use Magento\Framework\Component\ComponentRegistrar;
 9 | 
10 | ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Develodesign_PagebuilderLazyloadImages', __DIR__);
11 | 


--------------------------------------------------------------------------------
/etc/module.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
3 |     <module name="Develodesign_PagebuilderLazyloadImages">
4 |         <sequence>
5 |             <module name="Magento_PageBuilder"/>
6 |         </sequence>
7 |     </module>
8 | </config>
9 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |    "name": "develodesign/magento-module-pagebuilder-lazyload-images",
 3 |     "description": "Uses the modern browser loading=\"lazy\" attribute on images added via page builder. Can be turned on and off per image as needed.",
 4 |     "type": "magento2-module",
 5 |     "version": "1.0",
 6 |     "license": "GPL-3.0",
 7 |     "authors": [
 8 |         {
 9 |             "name": "Luke Collymore",
10 |             "email": "luke@develodesign.co.uk"
11 |         }
12 |     ],
13 |     "autoload": {
14 |         "files": [
15 |             "registration.php"
16 |         ],
17 |         "psr-4": {
18 |             "Develodesign\\PagebuilderLazyloadImages\\": ""
19 |         }
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Magento 2 Module for adding loading="lazy" to page builder images
 2 |  
 3 |  - [Main Functionalities](#markdown-header-main-functionalities)
 4 |  - [Installation](#markdown-header-installation)
 5 |  - [Configuration](#markdown-header-configuration)
 6 | 
 7 | 
 8 | ## Main Functionalities
 9 | Uses the modern browser loading="lazy" attribute on images added via page builder. Can be turned on and off per image as needed.
10 | 
11 | 
12 | * **Do not turn on for images loaded above the fold, this causes unnecessary layout shift (CLS).**
13 | 
14 | 
15 | ### Composer
16 | 
17 |  ```
18 |  composer require develodesign/magento-module-pagebuilder-lazyload-images
19 | 
20 |  bin/magento module:enable Develodesign_PagebuilderLazyLoadImages
21 |  bin/magento setup:upgrade
22 |  bin/magento cache:flush
23 | ```
24 | 
25 | ### Zip file
26 | 
27 |  - Unzip the zip file in `app/code/Develodesign/PagebuilderLazyloadImages`
28 |  - Enable the module by running `php bin/magento module:enable Develodesign_PagebuilderLazyloadImages`
29 |  - Apply database updates by running `php bin/magento setup:upgrade`\*
30 |  - Flush the cache by running `php bin/magento cache:flush`
31 | 
32 | ## Installation
33 |   * = in production please use the option `--keep-generated` 
34 |   
35 | ![This is an image](https://raw.githubusercontent.com/develodesign/magento-module-pagebuilder-lazyload-images/main/screen.png)
36 | 


--------------------------------------------------------------------------------
/view/adminhtml/pagebuilder/content_type/image.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
 9 |     <type name="image"
10 |           label="Image"
11 |           component="Magento_PageBuilder/js/content-type"
12 |           preview_component="Magento_PageBuilder/js/content-type/image/preview"
13 |           form="pagebuilder_image_form"
14 |           menu_section="media"
15 |           icon="icon-pagebuilder-image"
16 |           sortOrder="1"
17 |           translate="label">
18 |         <children default_policy="deny"/>
19 |         <appearances>
20 |             <appearance default="true"
21 |                         name="full-width"
22 |                         preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
23 |                         master_template="Magento_PageBuilder/content-type/image/full-width/master"
24 |                         reader="Magento_PageBuilder/js/master-format/read/configurable">
25 |                 <elements>
26 |                     <element name="desktop_image">
27 |                         <attribute name="loading" source="loading"/>
28 |                     </element>
29 |                     <element name="mobile_image">
30 |                         <attribute name="loading_mobile" source="loading"/>
31 |                     </element>
32 |                 </elements>
33 |             </appearance>
34 |         </appearances>
35 |     </type>
36 | </config>
37 | 


--------------------------------------------------------------------------------
/view/adminhtml/ui_component/pagebuilder_image_form.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <!--
 3 | /**
 4 |  * Copyright © Magento, Inc. All rights reserved.
 5 |  * See COPYING.txt for license details.
 6 |  */
 7 | -->
 8 | <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">
 9 |     <fieldset name="general" sortOrder="20">
10 |         <field name="loading_mobile" sortOrder="20" formElement="checkbox">
11 |             <argument name="data" xsi:type="array">
12 |                 <item name="config" xsi:type="array">
13 |                     <item name="default" xsi:type="string">lazy</item>
14 |                 </item>
15 |             </argument>
16 |             <settings>
17 |                 <dataType>boolean</dataType>
18 |                 <label translate="true">Lazy Load Mobile Image</label>
19 |                 <dataScope>loading_mobile</dataScope>
20 |             </settings>
21 |             <formElements>
22 |                 <checkbox>
23 |                     <settings>
24 |                         <valueMap>
25 |                             <map name="false" xsi:type="string"></map>
26 |                             <map name="true" xsi:type="string">lazy</map>
27 |                         </valueMap>
28 |                         <prefer>toggle</prefer>
29 |                     </settings>
30 |                 </checkbox>
31 |             </formElements>
32 |         </field>
33 |         <field name="loading" sortOrder="2" formElement="checkbox">
34 |             <argument name="data" xsi:type="array">
35 |                 <item name="config" xsi:type="array">
36 |                     <item name="default" xsi:type="string">lazy</item>
37 |                 </item>
38 |             </argument>
39 |             <settings>
40 |                 <dataType>boolean</dataType>
41 |                 <label translate="true">Lazy Load Image</label>
42 |                 <dataScope>loading</dataScope>
43 |             </settings>
44 |             <formElements>
45 |                 <checkbox>
46 |                     <settings>
47 |                         <valueMap>
48 |                             <map name="false" xsi:type="string"></map>
49 |                             <map name="true" xsi:type="string">lazy</map>
50 |                         </valueMap>
51 |                         <prefer>toggle</prefer>
52 |                     </settings>
53 |                 </checkbox>
54 |             </formElements>
55 |         </field>
56 |     </fieldset>
57 | </form>
58 | 


--------------------------------------------------------------------------------