feat/generator: update thumbnails grid view

generate/build.tsx

@@ -34,10 +34,17 @@ export interface Url {
   value: string;
 }
 
+interface ThumbnailSize {
+  "256": string;
+  "512": string;
+  "1024": string;
+  "2048": string;
+}
+
 export interface Image {
   id: string;
   image: string;
-  thumbnail: string;
+  thumbnail: ThumbnailSize;
   alt: string;
   tags: string[];
   urls: Url[];
@@ -86,7 +93,12 @@ if (
         items[year].push({
           id: doc.id,
           image: `${ENDPOINT}/${BUCKET}/${path}/${path}.${ext}`,
-          thumbnail: `${ENDPOINT}/${BUCKET}/${path}/${path}-512.${ext}`,
+          thumbnail: {
+            "256": `${ENDPOINT}/${BUCKET}/${path}/${path}-256.${ext}`,
+            "512": `${ENDPOINT}/${BUCKET}/${path}/${path}-512.${ext}`,
+            "1024": `${ENDPOINT}/${BUCKET}/${path}/${path}-1024.${ext}`,
+            "2048": `${ENDPOINT}/${BUCKET}/${path}/${path}-2048.${ext}`
+          },
           alt: data.alt,
           tags: data.tags,
           urls: data.urls,

generate/data/items.json

@@ -0,0 +1 @@
+{"2025":[{"id":"IMG_20241225_133609_1.jpg","image":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1.jpg","thumbnail":{"256":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-256.jpg","512":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-512.jpg","1024":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-1024.jpg","2048":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-2048.jpg"},"alt":"","tags":[],"urls":[],"mimetype":"image/jpeg","width":3472,"height":4624,"date":1740078000000},{"id":"ilse-orsel-PIlkIuwFhd0-unsplash.jpg","image":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash.jpg","thumbnail":{"256":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-256.jpg","512":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-512.jpg","1024":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-1024.jpg","2048":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-2048.jpg"},"alt":"","tags":[],"urls":[],"mimetype":"image/jpeg","width":6960,"height":4640,"date":1740078000000}]}

generate/data/tags.json

@@ -0,0 +1 @@
+[]

generate/static/css/tailwind.css

@@ -533,6 +533,12 @@
   .static {
     position: static;
   }
+  .\[grid-column\:span_2\] {
+    grid-column: span 2;
+  }
+  .\[grid-row\:span_2\] {
+    grid-row: span 2;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -563,6 +569,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -578,6 +587,15 @@
   .table {
     display: table;
   }
+  .aspect-\[1\/2\] {
+    aspect-ratio: 1/2;
+  }
+  .aspect-\[2\/1\] {
+    aspect-ratio: 2/1;
+  }
+  .aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
@@ -599,9 +617,21 @@
   .resize {
     resize: both;
   }
+  .grid-flow-row-dense {
+    grid-auto-flow: row dense;
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .items-center {
     align-items: center;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }

generate/static/js/initGalleries.js

@@ -2,15 +2,13 @@ const galleries = document.querySelectorAll('[data-type="gallery"]');
 
 galleries.forEach((item, idx) => {
   lightGallery(item, {
-    // plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom],
+    plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom],
-    plugins: [lgThumbnail, lgHash, lgZoom],
+    speed: 500,
-    // speed: 500,
+    thumbnail: true,
-    // thumbnail: true,
+    animateThumb: false,
-    // animateThumb: true,
+    zoomFromOrigin: false,
-    // zoomFromOrigin: true,
+    toggleThumb: true,
-    // allowMediaOverlap: false,
+    galleryId: Number(item.getAttribute('data-year')),
-    // mode: 'lg-zoom-in-out',
-    // galleryId: Number(item.getAttribute('data-year')),
     hash: true,
     customSlideName: true,
   });

generate/templates/Base.tsx

@@ -33,10 +33,9 @@ export default function Base({ children, isDev }: BaseProps) {
         <script src="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/plugins/fullscreen/lg-fullscreen.min.js"></script>
 
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lightgallery.min.css" />
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-thumbnail.min.css" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-share.min.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-thumbnail.min.css" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-zoom.min.css" />
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-transitions.min.css" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-fullscreen.min.css" />
 
       </head>

generate/templates/YearPhotos.tsx

@@ -12,21 +12,43 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
         {year}
       </h2>
 
-      <div className="" id={`gallery-${year}`} data-type="gallery" data-year={year}>
+      <div
-        {images.map((image) => (
+        className="grid grid-cols-6 grid-flow-row-dense gap-2"
-          <a
+        id={`gallery-${year}`}
-            href={image.image}
+        data-type="gallery"
-            className="lg:w-1/3 lg:h-1/3 sm:w-1/2 sm:h-1/2 p-2"
+        data-year={year}
-            key={`${year}-${image.id}`}
+      >
-            data-slide-name={image.id}
+        {images.map((image) => {
-          >
+          const aspectRatio = image.width / image.height;
-            <img
+          return (
-              src={image.thumbnail}
+            <a
-              className="w-full h-full object-cover rounded-lg"
+              href={image.image}
-              alt={image.alt}
+              className={`w-full h-full ${
-            />
+                aspectRatio < 0.95 ? "[grid-row:span_2] aspect-[1/2]" : aspectRatio > 1.05 ? "[grid-column:span_2] aspect-[2/1]" : "aspect-square"
-          </a>
+              }`}
-        ))}
+              key={`${year}-${image.id}`}
+              data-slide-name={image.id}
+              data-src={image.thumbnail[2048]}
+              data-lg-size={`512-100-480, 1200-513-960, 2048-1201`}
+              data-responsive={`${image.thumbnail[512]} 480, ${image.thumbnail[1024]} 960`}
+              data-srcset={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 960w, ${image.thumbnail[2048]} 1920w`}
+              data-sizes="(max-width: 600px) 480px,
+                        (max-width: 1200px) 960px,
+                        1920px"
+              data-download-url={image.image}
+            >
+              <img
+                src={image.thumbnail[512]}
+                srcSet={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 960w, ${image.thumbnail[2048]} 1920w`}
+                sizes="(max-width: 600px) 480px,
+                    (max-width: 1200px) 960px,
+                    1920px"
+                className="w-full h-full object-cover"
+                alt={image.alt}
+              />
+            </a>
+          );
+        })}
       </div>
     </div>
   );