From ee556f46e9735bb38cfc73cc4fbca1ad1632348b Mon Sep 17 00:00:00 2001
From: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com>
Date: Tue, 25 Feb 2025 09:24:58 +0100
Subject: [PATCH] Fix lazy loading images all being loaded when opening gallery
 (#534)

* Fix lazy loading images all being loaded when opening gallery

Because the lazy loaded image didn't have a limited height. Many
images would load anyway because they all fit in the parent box.
Giving them a minimal height with object-cover keeps them looking
good while limiting the amount that is lazy loaded.

* reduce the height to make the minimal images square
---
 frontend/assets/scss/custom.scss    | 5 +++++
 frontend/views/partials/Gallery.vue | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/assets/scss/custom.scss b/frontend/assets/scss/custom.scss
index 926ba40..9bda147 100644
--- a/frontend/assets/scss/custom.scss
+++ b/frontend/assets/scss/custom.scss
@@ -36,6 +36,11 @@ html, body, #wrapper, #inner, .container {
 	justify-content: flex-end;
 }
 
+.image-lazy {
+	min-height: 150px;
+	object-fit: cover;
+}
+
 @media all and (max-width: 1088px) {
 	.container {
 		padding: 20px;
diff --git a/frontend/views/partials/Gallery.vue b/frontend/views/partials/Gallery.vue
index 6813827..82ccf4a 100644
--- a/frontend/views/partials/Gallery.vue
+++ b/frontend/views/partials/Gallery.vue
@@ -10,7 +10,7 @@
           <div v-if="images.length > 1" class="column is-one-fifth sidebox">
             <ul>
               <li v-for="(image, index) in images" :key="index">
-                <img v-lazy="imageSrc(image.path)" @click="currentItem = image">
+                <img v-lazy="imageSrc(image.path)" @click="currentItem = image" class="image-lazy">
               </li>
             </ul>
           </div>