mirror of
https://github.com/Radiquum/photos.git
synced 2025-04-05 07:44:31 +00:00
feat/generator: update thumbnails grid view
This commit is contained in:
parent
27b0d27f01
commit
4bb907823f
GPG key ID:
858E8EE696525EED
7 changed files with 91 additions and 28 deletions
|
|
@ -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,
|
||||
|
|
|
|||
1
generate/data/items.json
Normal file
1
generate/data/items.json
Normal file
|
|
@ -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}]}
|
||||
1
generate/data/tags.json
Normal file
1
generate/data/tags.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
[]
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue