fix(caroussel): add div placeholder for speaker image lazy load

alpescraft · May 29, 2024 · 7d12db4 · 7d12db4
1 parent a62c80d
commit 7d12db4
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/layouts/partials/schedule.html b/layouts/partials/schedule.html
@@ -40,7 +40,9 @@ <h3 class="subtitle">Journée du Jeudi 6 Juin</h3>
                         <div class="col-lg-4 col-md-6">
                             <div class="card text-center border-0">
                                 <a href="{{ $speaker.href }}" aria-label="{{ $speaker.name }}">
-                                    <img class="card-img-top img-fluid img-thumbnail rounded-circle shadow-4-strong" loading="lazy" src="{{ $speaker.high_picture }}" alt="{{ $speaker.name }}">
+                                    <div style="width:100%;height:0; padding-top:50%;position:relative;">
+                                        <img style="position:absolute; top:0; left:33%; width:100%;" class="card-img-top img-fluid rounded-circle shadow-4-strong" loading="lazy" src="{{ $speaker.high_picture }}" alt="{{ $speaker.name }}">
+                                    </div>
                                     <div class="card-body">
                                         <h6 class="card-title">{{ $speaker.name }}</h6>
                                         <p class="card-text">