Add better lazyload on events list

diff --git a/app/static/src/sass/modules/boxes/_event-line-box.scss b/app/static/src/sass/modules/boxes/_event-line-box.scss
index 63eb8302e54a44da418c0e393b30d05261a21bd4..f83d2e6a178865264553c0f9a686e94a8ae15836 100644 (file)
--- a/app/static/src/sass/modules/boxes/_event-line-box.scss
+++ b/app/static/src/sass/modules/boxes/_event-line-box.scss
@@ -28,7 +28,7 @@ $module: ".event-line-box";
         @include line-height(1);
         @include typeface(serif);
         font-weight: weight(heavy);
-        
+
         visibility: hidden;
         height: 0;
 
@@ -36,8 +36,7 @@ $module: ".event-line-box";
 
     &__image {
 
-        width: 100%;
-        height: auto;
+        @include fluid-aspect(200 140);
 
     }
 

diff --git a/app/templates/agenda/includes/event_linecard.html b/app/templates/agenda/includes/event_linecard.html
index 47e8392d4194124889a43e3a024a09c8250bb0c2..44216aefc996f955b0680291b1228bb000b3583c 100644 (file)
--- a/app/templates/agenda/includes/event_linecard.html
+++ b/app/templates/agenda/includes/event_linecard.html
@@ -25,13 +25,17 @@
                 {% with event.images.all|get_type:'card' as images %}
                     {% if images %}
                         <a href="{{ event.get_absolute_url }}">
-                            <img class="event-line-box__image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140">
+                            <figure class="event-line-box__image">
+                                <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 400 280 %}">
+                            </figure>
                         </a>
                     {% else %}
                         {% with event.parent.images.all|get_type:'card' as images %}
                             {% if images %}
                                 <a href="{{ event.get_absolute_url }}">
-                                    <img class="event-line-box__image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140">
+                                    <figure class="event-line-box__image">
+                                        <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 400 280 %}">
+                                    </figure>
                                 </a>
                             {% endif %}
                         {% endwith %}