[TASK] progressive loaded images

Packages/chrosey_materialize/partials/images.twig

@@ -1,3 +1,5 @@
+{% import "partials/macros.twig" as macros %}
+
 {% block images %}
 <div class="container">
     {% if images | length > 1 %}
@@ -5,19 +7,13 @@
         {% for image in images %}
         <a href="{{ image.url }}"
            class="carousel-item">
-            <img class="lazy"
-                 loading="lazy"
-                 data-src="{{ image.url }}"
-                 alt="{{ image.alt }}">
+            {{ macros.variants(image) }}
         </a>
         {% endfor %}
     </div>
     {% else %}
-    <img data-src="{{ images.0.url }}"
-         alt="{{ images.0.alt }}"
-         class="materialboxed depth-1 lazy"
-         loading="lazy"
-         {{ images.0.size }}>
+    {{ macros.variants(images.0, "materialboxed" ) }}
     {% endif %}
 </div>
+
 {% endblock %}

Packages/chrosey_materialize/partials/macros.twig

@@ -0,0 +1,8 @@
+{% macro variants(image,class="") %}
+<div data-href="{{image.url}}"
+     class="progressive replace {{class}}">
+  <img src="{{ image.mypath }}/thumbs/{{ image.basename }}"
+       alt="{{ image.alt}}"
+       class="preview">
+</div>
+{% endmacro %}