[SAVE] Zwischencommit

Packages/chrosey_materialize/css/style.css

@@ -59,21 +59,6 @@ main {
     }
 }
 
-picture {
-    width: 100%;
-    /* stretch to fit its containing element */
-    overflow: hidden;
-}
-
-picture img {
-    width: 100%;
-    /* stretch to fill the picture element */
-    transition: filter .5s;
-}
-
-picture.lazy img {
-    filter: blur(20px);
-}
 
 /*
 header,

Packages/chrosey_materialize/partials/images.twig

@@ -7,12 +7,12 @@
         {% for image in images %}
         <a href="{{ image.url }}"
            class="carousel-item">
-            {{ macros.variants(image) }}
+            {{ macros.variants(image.url, image.preview, image.alt, 200, 50 ) }}
         </a>
         {% endfor %}
     </div>
     {% else %}
-    {{ macros.variants(images.0, "materialboxed" ) }}
+    {{ macros.variants(images.0.url, images.0.preview, images.0.alt, 200, 50, "materialboxed" ) }}
     {% endif %}
 </div>
 

Packages/chrosey_materialize/partials/macros.twig

@@ -1,8 +1,12 @@
-{% macro variants(image,class="") %}
-<div data-href="{{image.url}}"
+{% macro variants(fullImage,preview,alt="",height,width,class="") %}
+
+{% set preview = preview!="" ? preview : fullImage %}
+<div data-href="{{ fullImage }}"
      class="progressive replace {{class}}">
-  <img src="{{ image.mypath }}/thumbs/{{ image.basename }}"
-       alt="{{ image.alt}}"
-       class="preview">
+     <img class="preview"
+          src="{{ preview }}"
+          alt="{{ alt}}"
+          height="{{ height }}"
+          width="{{ width }}">
 </div>
 {% endmacro %}

Packages/chrosey_materialize/templates/blog.twig

@@ -1,5 +1,5 @@
 {% extends "templates/layout/base.twig" %}
-
+{% import "partials/macros.twig" as macros %}
 {% block content %}
 {{parent()}}
 
@@ -9,10 +9,7 @@
       <div class="col s12 m3">
             <div class="card hoverable">
                   <div class="card-image">
-                        <img data-src="{{ images.0.url }}"
-                             alt="{{ images.0.alt }}"
-                             loading="lazy"
-                             class="lazy">
+                        {{ macros.variants(images.0.url, images.0.url, images.0.alt, 200, 50 ) }}
                         <a href="{{ page.url }}"
                            class="btn-floating halfway-fab waves-effect waves-light deep-orange"><i
                                  class="material-icons">chevron_right</i></a>

Packages/chrosey_materialize/templates/layout/navigationBar.twig

@@ -4,10 +4,8 @@
       <a id="logo-container"
          href="{{ "index"|link }}"
          class="brand-logo">
-         <img class="lazy"
-              loading="lazy"
-              data-src="{{ assets_url }}/logo.svg "
-              alt=""
+         <img src="{{ assets_url }}/logo.svg "
+              alt="Logo"
               height="64"
               width="64" />
       </a>