feat: lazyloading

Signed-off-by: Florian ALEXANDRE <f.alexandre@novactive.com>
ezecosystem · Feb 15, 2019 · 3b6e226 · 3b6e226
1 parent c35d7da
commit 3b6e226
Show file tree

Hide file tree

Showing 25 changed files with 570 additions and 194 deletions.
diff --git a/README.md b/README.md
@@ -47,9 +47,16 @@ public function registerBundles()
 ```
 
 ```twig
-<script src="{{ asset("bundles/ezenhancedimageasset/js/focuspoint.js") }}"></script>
+<script src="{{ asset("bundles/ezenhancedimageasset/js/enhancedimage.js") }}"></script>
 ```
-
+#### LazyLoading
+Lazy loading is controlled globaly by the following settings (default to true) and can be overriden at field level.
+
+```yaml
+parameters: 
+  ez_enhanced_image_asset.default.enable_lazy_load: true
+```
+
 ### 2. Image variations configuration
 
 If needed, update your configuration and add the following filter to generate thumbnail based on the contributed focus point 
@@ -73,6 +80,7 @@ You can now specify the `alternativeAlias` parameter to define alternative image
                 media: '(max-width: 320px)'
             }
         ]
+        lazyLoad: true|false // optionnal
     }
 }) }}
 ```

diff --git a/package.json b/package.json
@@ -5,13 +5,15 @@
   "repository": "https://github.com/Novactive/NovaeZEnhancedImageAssetBundle.git",
   "author": "Florian ALEXANDRE <f.alexandre@novactive.com>",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "image-focus": "^1.0.3",
+    "lazysizes": "^4.1.5"
+  },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "7.1.0",
     "babel-loader": "^8.0.5",
     "babel-preset-env": "^1.7.0",
-    "image-focus": "^1.0.3",
     "ts-loader": "^5.3.3",
     "typescript": "^3.3.3",
     "uglifyjs-webpack-plugin": "^2.1.1",

diff --git a/src/bundle/DependencyInjection/EzEnhancedImageAssetExtension.php b/src/bundle/DependencyInjection/EzEnhancedImageAssetExtension.php
@@ -34,6 +34,7 @@ public function load(array $configs, ContainerBuilder $container)
     {
         $loader = new Loader\YamlFileLoader($container, new FileLocator(__DIR__.'/../Resources/config'));
         $loader->load('services.yml');
+        $loader->load('default_settings.yml');
         $loader->load('fieldtypes.yml');
         $loader->load('field_value_converters.yml');
         $loader->load('migration.yml');
@@ -57,8 +58,10 @@ public function prepend(ContainerBuilder $container)
         );
 
         $configs = [
-            'field_templates.yml' => 'ezpublish',
-            'admin_ui_forms.yml'  => 'ezpublish',
+            'field_templates.yml'   => 'ezpublish',
+            'admin_ui_forms.yml'    => 'ezpublish',
+            'image_variations.yml'  => 'ezpublish',
+            'twig.yml'              => 'twig',
         ];
 
         $activatedBundles = array_keys($container->getParameter('kernel.bundles'));

diff --git a/src/bundle/Resources/config/default_settings.yml b/src/bundle/Resources/config/default_settings.yml
@@ -0,0 +1,3 @@
+parameters:
+  ez_enhanced_image_asset.default.image_default_post_processors: ~
+  ez_enhanced_image_asset.default.enable_lazy_load: true
diff --git a/src/bundle/Resources/config/field_templates.yml b/src/bundle/Resources/config/field_templates.yml
@@ -9,9 +9,10 @@ system:
         field_templates:
             -
                 template: "@ezdesign/enhanced_image_asset/content_fields.html.twig"
+                priority: 1000
 
     admin_group:
         field_templates:
             -
                 template: "@ezdesign/enhanced_image_asset/admin_content_fields.html.twig"
-                priority: 10
+                priority: 1000
diff --git a/src/bundle/Resources/config/image_variations.yml b/src/bundle/Resources/config/image_variations.yml
@@ -0,0 +1,11 @@
+system:
+  default:
+    image_variations:
+      original_optimized:
+        reference: null
+        post_processors:
+          jpegoptim: { strip_all: true, max: 70, progressive: true }
+      placeholder:
+        reference: original_optimized
+        filters:
+          - { name: placeholder, params: {size: [42, null]} }
diff --git a/src/bundle/Resources/config/services.yml b/src/bundle/Resources/config/services.yml
@@ -6,6 +6,7 @@ services:
 
         bind:
             $imageVariationService: '@ezpublish.fieldType.ezimage.variation_service'
+            $filterConfiguration: '@liip_imagine.filter.configuration'
 
     Novactive\EzEnhancedImageAsset\Twig\:
         resource: '../../../lib/Twig/*'
@@ -21,9 +22,20 @@ services:
         tags:
             - {name: 'liip_imagine.filter.loader', loader: 'focusedThumbnail'}
 
+    Novactive\EzEnhancedImageAsset\Imagine\Filter\Loader\PlaceholderFilterLoader:
+        tags:
+            - { name: "liip_imagine.filter.loader", loader: 'placeholder' }
+
     Novactive\EzEnhancedImageAsset\Imagine\ImageAliasGenerator:
         decorates: ezpublish.image_alias.imagine.alias_generator
         arguments:
             $dataLoader: "@ezpublish.image_alias.imagine.binary_loader"
             $ioResolver: "@ezpublish.image_alias.imagine.cache_resolver"
-            $logger: "@?logger"
+            $logger:
+
+    Novactive\EzEnhancedImageAsset\Imagine\Filter\FilterConfiguration:
+        decorates: 'liip_imagine.filter.configuration'
+        arguments:
+            $filterConfiguration: '@Novactive\EzEnhancedImageAsset\Imagine\Filter\FilterConfiguration.inner'
+        calls:
+            - [setDefaultPostProcessors, ['$image_default_post_processors;ez_enhanced_image_asset$']]
diff --git a/src/bundle/Resources/config/twig.yml b/src/bundle/Resources/config/twig.yml
@@ -0,0 +1,2 @@
+globals:
+  lazy_load_images: $enable_lazy_load;ez_enhanced_image_asset$
diff --git a/src/bundle/Resources/public/css/enhancedimage.css b/src/bundle/Resources/public/css/enhancedimage.css
diff --git a/src/bundle/Resources/public/css/enhancedimage.scss b/src/bundle/Resources/public/css/enhancedimage.scss
@@ -13,4 +13,19 @@ picture.enhancedimage--wrapper {
   display: block;
   position: relative;
   overflow: hidden;
+  .enhancedimage--img{
+    position: absolute;
+    min-height: 100%;
+    min-width: 100%;
+    &.blur-up {
+      -webkit-filter: blur(0);
+      filter: blur(0);
+      transition: filter 400ms, -webkit-filter 400ms;
+      &:not(.lazyloaded){
+        -webkit-filter: blur(25px);
+        filter: blur(25px);
+        transform: scale(1.1);
+      }
+    }
+  }
 }
diff --git a/src/bundle/Resources/public/js/enhancedimage.js b/src/bundle/Resources/public/js/enhancedimage.js
diff --git a/src/bundle/Resources/public/js/focuspoint.js b/src/bundle/Resources/public/js/focuspoint.js
diff --git a/src/bundle/Resources/public/js/scripts/fieldType/enhancedimage.js b/src/bundle/Resources/public/js/scripts/fieldType/enhancedimage.js
@@ -65,8 +65,8 @@
                     let imageComponent = image._image;
                     if (imageComponent) {
                         imageComponent.addSource(image.getAttribute('srcset'), {
-                            x: image.getAttribute('data-focus-x'),
-                            y: image.getAttribute('data-focus-y'),
+                            x: parseFloat(image.getAttribute('data-focus-x')),
+                            y: parseFloat(image.getAttribute('data-focus-y')),
                         });
                         imageComponent.updateFocusPoint(true);
                     }
@@ -131,12 +131,9 @@
 
             [...this.fieldContainer.querySelectorAll(SELECTOR_FRAME)].forEach((frame) => {
                 const image = frame.querySelector('img');
-                image.setAttribute('data-focus-x', focusX.toFixed(2));
-                image.setAttribute('data-focus-y', focusY.toFixed(2));
-
                 let imageComponent = image._image;
                 if (imageComponent) {
-                    imageComponent.updateFocusPoint(true);
+                    imageComponent.setFocus({ x: parseFloat(focusX.toFixed(2)), y: parseFloat(focusY.toFixed(2)) });
                 }
                 image.dispatchEvent(new CustomEvent('focusChange', { focusX: focusX, focusY: focusY }));
             });

diff --git a/...undle/Resources/views/themes/standard/enhanced_image_asset/admin_content_fields.html.twig b/...undle/Resources/views/themes/standard/enhanced_image_asset/admin_content_fields.html.twig
@@ -5,13 +5,15 @@
     {% spaceless %}
         {% if not ez_is_field_empty( content, field ) %}
             {% set imageAlias = ez_image_alias( field, versionInfo, parameters.alias|default( 'original' ) ) %}
+            {% set placeholderAlias = ez_image_alias( field, versionInfo, "placeholder" ) %}
             {% set focusPoint = field.value.focusPoint %}
-            {% set src = imageAlias ? asset( imageAlias.uri ) : "//:0" %}
             {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ez-field-preview ez-field-preview--ezimage')|trim}) %}
             <div {{ block( 'field_attributes' ) }}>
                 <div class="ez-image__wrapper  ">
                     <picture class="enhancedimage--wrapper">
-                        <img srcset="{{ src }}" class="enhancedimage--img"
+                        <img srcset="{{ placeholderAlias ? asset( placeholderAlias.uri ) : "//:0" }}"
+                             data-srcset="{{ imageAlias ? asset( imageAlias.uri ) : "//:0" }}"
+                             class="enhancedimage--img enhancedimage--img--lazyload blur-up"
                              data-focus-x="{{ (focusPoint ? focusPoint.posX : '')}}"
                              data-focus-y="{{ (focusPoint ? focusPoint.posY : '')}}">
                     </picture>
@@ -51,7 +53,7 @@
                                     {% set reticleX = ((focusPoint.posX + 1) / 2) * 100 %}
                                     {% set reticleY = ((-focusPoint.posY + 1) / 2) * 100 %}
                                     <img class="focuspoint-helper--reticle" src="{{ asset('bundles/ezenhancedimageasset/img/focuspoint-target.png') }}" style="top: {{ reticleY|round(2) }}%; left: {{ reticleX|round(2) }}%;">
-                                    <img class="focuspoint-helper--img" src="{{ src }}">
+                                    <img class="focuspoint-helper--img" src="{{ imageAlias ? asset( imageAlias.uri ) : "//:0" }}">
                                 </div>
                             </div>
                         </td>