Implement spteclazyload (#7)

* Implement stefanpoensgen/SptecLazyload

Author: tinect

CHANGELOG_de-DE.md

@@ -1,3 +1,7 @@
+# 1.0.10
+
+* FEATURE Thumbnails werden nun erst geladen, sobald der Besucher auch in der Nähe ist
+
 # 1.0.9
 
 * BUGFIX Behebe Problem mit thumbnail-variable, wenn kein Thumbnail existiert

CHANGELOG_en-GB.md

@@ -1,3 +1,7 @@
+# 1.0.10
+
+* FEATURE Thumbnails will be lazy loaded
+
 # 1.0.9
 
 * BUGFIX Fix thumbnail-variable, which occurs, when no thumbnail exists

README.md

@@ -3,8 +3,10 @@
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) [![Shopware Store](https://img.shields.io/badge/shopware-store-blue.svg?style=flat-square)](https://store.shopware.com/en/frosh69611263569f/thumbnailprocessor-plugin.html)
 
 
-This plugins allows you to use variable thumbnails, if your filesystem (or storage-adapter) supports it.
-It will add parameters to original image paths.
+This plugins allows you to use variable thumbnails, if your filesystem (or storage-adapter) supports it.  
+Additionally it has built-in Lazyloading.  
+You can use this, if you don't want thumbnails to be created on you development-system, too.  
+It will add parameters to original image paths.  
 So you are able to save storage and add new thumbnails on the fly.
 
 | Version 	| Requirements               	
@@ -16,6 +18,10 @@ So you are able to save storage and add new thumbnails on the fly.
 
 Download the plugin from the release page and enable it in shopware.
 
+### From source
+
+Run `npm install` in `src/Resources/app/storefront` within the plugin directory
+
 ## Usage
 While active, this will access all thumbnails variable from original image. The thumbnail-files won't be needed anymore.
 

composer.json

@@ -11,7 +11,7 @@
         "thumbnail"
     ],
     "description": "This plugins allows you to use variable thumbnails, without having them on storage.",
-    "version": "1.0.9",
+    "version": "1.0.10",
     "type": "shopware-platform-plugin",
     "license": "mit",
     "authors": [

src/Resources/app/storefront/build/webpack.config.js

@@ -0,0 +1,10 @@
+// eslint-disable-next-line func-names
+module.exports = function (params) {
+    return {
+        resolve: {
+            modules: [
+                `${params.basePath}Resources/app/storefront/node_modules`
+            ]
+        }
+    };
+};

src/Resources/app/storefront/dist/storefront/js/frosh-platform-thumbnail-processor.js

@@ -0,0 +1,10 @@
+{
+  "name": "froshplatformthumbnailprocessor-storefront-packages",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "lazysizes": "^5.2.1"
+  },
+  "author": "Sebastian König (@tinect)",
+  "license": "MIT"
+}

src/Resources/app/storefront/package-lock.json

@@ -0,0 +1,12 @@
+import Debouncer from 'src/helper/debouncer.helper';
+import 'lazysizes';
+import 'lazysizes/plugins/native-loading/ls.native-loading';
+import 'lazysizes/plugins/attrchange/ls.attrchange';
+import 'lazysizes/plugins/parent-fit/ls.parent-fit';
+import 'lazysizes/plugins/object-fit/ls.object-fit';
+
+document.addEventListener('lazyloaded', Debouncer.debounce(function(event){
+    if(event.target.classList.contains('tns-complete')) {
+        window.dispatchEvent(new Event('resize'));
+    }
+}, 400));

src/Resources/app/storefront/package.json

@@ -1,4 +1,5 @@
-Verschwende keine Rechenleistung und keinen Speicherplatz mit Thumbnails! Mit diesem Plugin können Sie auf dynamische Thumbnails zurückgreifen.  
+Verschwende keine Rechenleistung und keinen Speicherplatz mit Thumbnails!  
+Mit diesem Plugin können Sie auf dynamische Thumbnails zurückgreifen. Außerdem stellt dieses Plugin die Funktion von LazyLoading für Thumbnails zu Verfügung.  
 Jeder Artikel, jedes Bild in der Einkaufswelten hat berechtigterweise Thumbnails. Diese werden standardmäßig
 automatisch beim Upload erzeugt und gespeichert.  
 An diesem Punkt greift dieses Plugin ein und stellt die Funktion zur Verfügung, dass keine Thumbnails mehr erstellt

src/Resources/app/storefront/src/main.js

@@ -1,4 +1,5 @@
 Don't waste the computing power and space with thumbnails! With this plugin you can access dynamic thumbnails.  
+This plugin also provides the LazyLoading function for thumbnails.  
 Every product, every picture in the shopping worlds legitimately has thumbnails. These become standard
 generated and saved automatically during upload.  
 At this point this plugin intervenes and provides the function that no more thumbnails are created have to be created.  

src/Resources/store/de.md

@@ -1,7 +1,6 @@
 {% if not shopware.config.FroshPlatformThumbnailProcessor.config.FixListingThumbnailSizes %}
     {{ include('@Storefront/storefront/utilities/thumbnail.html.twig') }}
 {% else %}
-{# FROSH: we are just removing max-width here, nothing more #}
 
 {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
 {% if load is not defined %}
@@ -49,16 +48,38 @@
         {% for key, value in shopware.theme.breakpoint|reverse %}(min-width: {{ value }}px) {{ sizes[key] }}{% if not loop.last %}, {% endif %}{% endfor %}, {{ sizeFallback }}vw
     {% endapply %}{% endset %}
 {% endif %}
-<img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
-    {% if media.thumbnails|length > 0 %}
-        {% if load %}srcset="{{ srcsetValue }}" {% else %}data-srcset="{{ srcsetValue }}" {% endif %}
-        {% if sizes['default'] %}
-        sizes="{{ sizes['default'] }}"
-        {% elseif sizes|length > 0 %}
-        sizes="{{ sizesValue }}"
-        {% endif %}
+
+{% if load is same as(true) %}
+    {% if attributes.class %}
+        {% set attributes = attributes|merge({'class': 'lazyload ' ~ attributes.class}) %}
+    {% else %}
+        {% set attributes = attributes|merge({'class': 'lazyload'}) %}
     {% endif %}
-    {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
-/>
+
+    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+        data-src="{{ media|sw_encode_media_url }}"
+        {% if media.thumbnails|length > 0 %}
+            data-srcset="{{ srcsetValue }}"
+            {% if sizes['default'] %}
+            data-sizes="{{ sizes['default'] }}"
+            {% elseif sizes|length > 0 %}
+            data-sizes="{{ sizesValue }}"
+            {% endif %}
+        {% endif %}
+        {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
+    />
+{% else %}
+    <img data-src="{{ media|sw_encode_media_url }}"
+        {% if media.thumbnails|length > 0 %}
+            data-srcset="{{ srcsetValue }}"
+            {% if sizes['default'] %}
+            sizes="{{ sizes['default'] }}"
+            {% elseif sizes|length > 0 %}
+            sizes="{{ sizesValue }}"
+            {% endif %}
+        {% endif %}
+        {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value }}"{% endif %}{% endfor %}
+    />
+{% endif %}
 
 {% endif %}