add lazyload

user/themes/figureslibres/templates/partials/base.html.twig

@@ -22,6 +22,7 @@
 
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
+        {% do assets.addJs('theme://js/jquery.lazy.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
     {% endblock %}
 

user/themes/figureslibres/templates/partials/blog-item.html.twig

@@ -13,6 +13,6 @@
 
 <div class="card-image">
 {% for image in page.media.images %}
-  {{ image.html }}
+    <img class="lazy" data-src="{{image.url}}" alt="images">
 {% endfor %}
 </div>

user/themes/figureslibres/templates/partials/blog-list-item.html.twig

@@ -6,19 +6,24 @@
     {% set image = page.media.images|first %}
     {% if image %}
         <div id="{{ page.folder }}" class="card-image">
-          <a href="{{ page.url }}">{{ image.html("", "Projet") }}</a>
+          <a href="{{ page.url }}">
+            
+            <div class="card-header">
+              {% if page.header.title %}
+              {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
+              {% endif %}
+              {% if page.header.taxonomy.tag %}
+              {% include 'partials/blog/taxonomy.html.twig' %}
+              {% endif %}
+
+              {% if page.header.date %}
+              {% include 'partials/blog/date.html.twig' %}
+              {% endif %}
+            </div>
+
+            <img class="lazy" data-src="{{image.url}}" alt="Projet">
+
+          </a>
       </div>
     {% endif %}
-    <div class="card-header">
-      {% if page.header.title %}
-        {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
-      {% endif %}
-        {% if page.header.taxonomy.tag %}
-          {% include 'partials/blog/taxonomy.html.twig' %}
-        {% endif %}
-
-        {% if page.header.date %}
-          {% include 'partials/blog/date.html.twig' %}
-        {% endif %}
-    </div>
 </div>