restyle gallery

Author: livensmi1e

src/components/Gallery.astro

@@ -3,7 +3,10 @@ import type { ImageMetadata } from "astro";
 import { Image, getImage } from "astro:assets";
 const { imageFolder }= Astro.props;
 
-const imagesImportFns = import.meta.glob<{default: ImageMetadata}>("/src/assets/gallery/**/*.{jpeg,jpg,png,gif}");
+const imagesImportFns = import.meta.glob<{default: ImageMetadata}>(
+    "/src/assets/gallery/**/*.{jpeg,jpg,png,gif}",
+    { eager: true }
+);
 const imagePaths = Object.keys(imagesImportFns).filter((imagePath) => {
     return imagePath.startsWith(`/src/assets/gallery/${imageFolder}`)
 }).sort((a, b) => {
@@ -18,18 +21,17 @@ const imagePaths = Object.keys(imagesImportFns).filter((imagePath) => {
 <section class="gallery" id="gallery">
     {
         imagePaths.map(async (imagePath: any) => {
-            let image = imagesImportFns[imagePath]();
-            let optimizedImage =  await getImage({
-				src: image,
-			});
+            const imageModule = imagesImportFns[imagePath];
+            const image = imageModule.default;
             return (
                 <a 
-                    href={optimizedImage.src}
-                    data-pswp-width="1080"
-                    data-pswp-height="720"
+                    href={image.src}
+                    data-pswp-width={image.width}
+                    data-pswp-height={image.height}
                     data-cropped="true"
                     target="_blank"
-                    class="gallery__item"><Image src={image} alt=""></Image>
+                    class="gallery__item">
+                        <Image src={image} alt="" loading="lazy"></Image>
                 </a>
             )
         })
@@ -50,42 +52,59 @@ const imagePaths = Object.keys(imagesImportFns).filter((imagePath) => {
     lightbox.init();
 </script>
 
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".gallery__item img").forEach((img) => {
+      if (img.complete) {
+        img.classList.add("is-loaded");
+      } else {
+        img.addEventListener("load", () => {
+            img.classList.add("is-loaded");
+        });
+      }
+    });
+  });
+</script>
+
 <style>
     .gallery {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 170px);
-        gap: var(--spacing-sm);
-        margin: auto;
-        margin-bottom: var(--spacing-xl);
-        padding: var(--spacing-sm);
-        justify-content: center;
+        column-count: 3;
+        column-gap: var(--spacing-xxs);
+        margin: 0 auto 80px auto;
+    }
+
+    /* Tablet */
+    @media (max-width: 900px) {
+        .gallery {
+            column-count: 2;
+        }
+    }
+
+    /* Mobile */
+    @media (max-width: 600px) {
+        .gallery {
+            column-count: 1;
+        }
     }
 
     .gallery__item {
         display: block;
-        height: 125px;
-        width: 100%;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        padding: 5px;
-        background-color: rgb(255, 255, 255);
-        overflow: hidden;
-        transition: 0.3s; 
-    }   
-
-    .gallery__item:hover {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        margin-bottom: var(--spacing-xxs);
+        break-inside: avoid;
     }
 
     .gallery__item img {
-        filter: brightness(95%);
-        display: block;
         width: 100%;
-        height: 100%;
-    }
+        height: auto;
+        display: block;
 
-    .gallery__item img:hover {
-        filter: brightness(100%);
+        filter: grayscale(100%) blur(6px);
+        opacity: 0.7;
+        transition: all 0.8s ease;
     }
 
+    .gallery__item img.is-loaded {
+        filter: none;
+        opacity: 1;
+    }
 </style>

src/pages/photos/heaven.astro

@@ -5,8 +5,9 @@ import Gallery from "../../components/Gallery.astro";
 
 <BaseLayout>
     <div class="content">
-        <h2 class="title">Photos</h2>
-        <h3 class="desc">~ Heaven on Earth ~</h3>
+        <h2 class="title">Gallery |
+            <span class="desc">Heaven on Earth</span>
+        </h2>
         <Gallery imageFolder="heaven" />
     </div>
 </BaseLayout>