diff --git a/generate/build.tsx b/generate/build.tsx
index 67d3008..9dd8477 100644
--- a/generate/build.tsx
+++ b/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,
diff --git a/generate/data/items.json b/generate/data/items.json
new file mode 100644
index 0000000..26159ce
--- /dev/null
+++ b/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}]}
\ No newline at end of file
diff --git a/generate/data/tags.json b/generate/data/tags.json
new file mode 100644
index 0000000..0637a08
--- /dev/null
+++ b/generate/data/tags.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css
index 75fcc6c..a9e4ea8 100644
--- a/generate/static/css/tailwind.css
+++ b/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);
}
diff --git a/generate/static/js/initGalleries.js b/generate/static/js/initGalleries.js
index bb72b45..b1a218a 100644
--- a/generate/static/js/initGalleries.js
+++ b/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, lgZoom],
- // speed: 500,
- // thumbnail: true,
- // animateThumb: true,
- // zoomFromOrigin: true,
- // allowMediaOverlap: false,
- // mode: 'lg-zoom-in-out',
- // galleryId: Number(item.getAttribute('data-year')),
+ plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom],
+ speed: 500,
+ thumbnail: true,
+ animateThumb: false,
+ zoomFromOrigin: false,
+ toggleThumb: true,
+ galleryId: Number(item.getAttribute('data-year')),
hash: true,
customSlideName: true,
});
diff --git a/generate/templates/Base.tsx b/generate/templates/Base.tsx
index 71d10ab..d473d26 100644
--- a/generate/templates/Base.tsx
+++ b/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>
diff --git a/generate/templates/YearPhotos.tsx b/generate/templates/YearPhotos.tsx
index dd462ae..aea442a 100644
--- a/generate/templates/YearPhotos.tsx
+++ b/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}>
- {images.map((image) => (
- <a
- href={image.image}
- className="lg:w-1/3 lg:h-1/3 sm:w-1/2 sm:h-1/2 p-2"
- key={`${year}-${image.id}`}
- data-slide-name={image.id}
- >
- <img
- src={image.thumbnail}
- className="w-full h-full object-cover rounded-lg"
- alt={image.alt}
- />
- </a>
- ))}
+ <div
+ className="grid grid-cols-6 grid-flow-row-dense gap-2"
+ id={`gallery-${year}`}
+ data-type="gallery"
+ data-year={year}
+ >
+ {images.map((image) => {
+ const aspectRatio = image.width / image.height;
+ return (
+ <a
+ href={image.image}
+ 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"
+ }`}
+ 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>
);