feat(gallery): load and display exif data
This commit is contained in:
@@ -1,244 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import { LazyGalleryModal } from "#components";
|
||||
import type { InternalApi } from "nitropack/types";
|
||||
|
||||
type ImageMetadata = {
|
||||
url: string;
|
||||
date: string;
|
||||
camera: string;
|
||||
lens: string;
|
||||
settings?: {
|
||||
aperture?: string;
|
||||
shutter?: string;
|
||||
iso?: string;
|
||||
focalLength?: string;
|
||||
};
|
||||
};
|
||||
|
||||
const images: ImageMetadata[] = [
|
||||
{
|
||||
url: "https://picsum.photos/640/640?random=1",
|
||||
date: "March 7, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/800?random=2",
|
||||
date: "March 8, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/800/640?random=3",
|
||||
date: "March 10, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/1000/640?random=4",
|
||||
date: "March 12, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/400?random=5",
|
||||
date: "March 15, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/800?random=6",
|
||||
date: "March 18, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/810/640?random=7",
|
||||
date: "March 20, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/760/640?random=8",
|
||||
date: "March 22, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/900?random=9",
|
||||
date: "March 25, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/1000/640?random=10",
|
||||
date: "March 28, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
{
|
||||
url: "https://picsum.photos/640/600?random=11",
|
||||
date: "March 30, 2025",
|
||||
camera: "Olympus EPL-7",
|
||||
lens: "Olympus M.Zuiko ED 60mm f/2.8 Macro",
|
||||
settings: {
|
||||
aperture: "f/10",
|
||||
shutter: "1/250s",
|
||||
iso: "500",
|
||||
focalLength: "60mm",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const columnCount = ref(3);
|
||||
|
||||
const getColumnImages = (columnNumber: number) =>
|
||||
images.filter((_, index) => index % columnCount.value === columnNumber - 1);
|
||||
|
||||
const updateColumns = () => {
|
||||
if (window.innerWidth < 768) {
|
||||
columnCount.value = 1;
|
||||
} else if (window.innerWidth < 1152) {
|
||||
columnCount.value = 2;
|
||||
} else {
|
||||
columnCount.value = 3;
|
||||
}
|
||||
};
|
||||
const images = ref<InternalApi["/api/gallery"]["get"]>([]);
|
||||
|
||||
const scrollArea = ref();
|
||||
const overlay = useOverlay();
|
||||
const galleryModal = overlay.create(LazyGalleryModal);
|
||||
|
||||
const openModal = async (image: ImageMetadata) => {
|
||||
const index = images.indexOf(image);
|
||||
if (index !== -1) {
|
||||
const instance = galleryModal.open({
|
||||
images,
|
||||
initialIndex: index,
|
||||
});
|
||||
const openModal = async (index: number) => {
|
||||
const instance = galleryModal.open({
|
||||
images: images.value,
|
||||
initialIndex: index,
|
||||
});
|
||||
|
||||
const newIndex: number = await instance.result;
|
||||
if (newIndex !== index) {
|
||||
const targetElement = document.querySelector(
|
||||
`[data-image-index="${newIndex}"]`,
|
||||
);
|
||||
if (targetElement) {
|
||||
targetElement.scrollIntoView({ behavior: "instant", block: "center" });
|
||||
}
|
||||
}
|
||||
const newIndex: number = await instance.result;
|
||||
if (newIndex !== index && scrollArea.value?.virtualizer) {
|
||||
scrollArea.value.virtualizer.scrollToIndex(newIndex, {
|
||||
align: "center",
|
||||
behavior: "instant",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const lanes = ref(3);
|
||||
|
||||
const updateLanes = () => {
|
||||
if (window.innerWidth < 768) {
|
||||
lanes.value = 1;
|
||||
} else if (window.innerWidth < 1152) {
|
||||
lanes.value = 2;
|
||||
} else {
|
||||
lanes.value = 3;
|
||||
}
|
||||
};
|
||||
|
||||
const { data: galleryPhotos } = await useAsyncData("gallery", () =>
|
||||
$fetch("/api/gallery"),
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
updateColumns();
|
||||
window.addEventListener("resize", updateColumns);
|
||||
if (!galleryPhotos.value) return;
|
||||
|
||||
// shuffle
|
||||
images.value = galleryPhotos.value
|
||||
.map((photo) => ({ photo, sort: Math.random() }))
|
||||
.sort((a, b) => a.sort - b.sort)
|
||||
.map(({ photo }) => photo);
|
||||
|
||||
updateLanes();
|
||||
window.addEventListener("resize", updateLanes);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", updateColumns);
|
||||
window.removeEventListener("resize", updateLanes);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-[#0a0a0a] text-white px-12 py-12 font-[JetBrains_Mono]"
|
||||
<UScrollArea
|
||||
ref="scrollArea"
|
||||
:items="images"
|
||||
:virtualize="{
|
||||
lanes,
|
||||
gap: 24,
|
||||
estimateSize: (index) => {
|
||||
if (index === 0) return 150;
|
||||
return 330;
|
||||
},
|
||||
}"
|
||||
class="p-6 lg:p-8 xl:p-10 2xl:p-12 h-screen bg-[#0a0a0a] text-white font-[JetBrains_Mono]"
|
||||
>
|
||||
<div class="flex gap-6">
|
||||
<div
|
||||
v-for="col in columnCount"
|
||||
:key="col"
|
||||
class="flex-1 flex flex-col gap-6"
|
||||
>
|
||||
<header v-if="col === 1" class="pr-2 pb-6">
|
||||
<UButton
|
||||
icon="i-lucide-arrow-left"
|
||||
size="md"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:ui="{
|
||||
base: 'px-0 text-neutral-600 hover:text-neutral-400',
|
||||
leadingIcon: 'size-4',
|
||||
}"
|
||||
>Back to Home</UButton
|
||||
>
|
||||
|
||||
<h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
|
||||
<p class="text-neutral-600 text-sm mt-2 w-4/5">
|
||||
Started on March 7th, 2025. I love macro photography of insects and
|
||||
flowers.
|
||||
</p>
|
||||
</header>
|
||||
<div
|
||||
v-for="(image, idx) in getColumnImages(col)"
|
||||
:key="idx"
|
||||
:data-image-index="images.indexOf(image)"
|
||||
class="relative overflow-hidden rounded-sm bg-black cursor-pointer transition-transform"
|
||||
@click="openModal(image)"
|
||||
<template #default="{ item: image, index }">
|
||||
<header v-if="index === 0" class="pr-2 pb-6">
|
||||
<UButton
|
||||
icon="i-lucide-arrow-left"
|
||||
size="md"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
:ui="{
|
||||
base: 'px-0 text-neutral-600 hover:text-neutral-400',
|
||||
leadingIcon: 'size-4',
|
||||
}"
|
||||
>Back to Home</UButton
|
||||
>
|
||||
<img
|
||||
:src="image.url"
|
||||
class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl mt-3 font-bold">Pihkaal's Gallery</h1>
|
||||
<p class="text-neutral-600 text-sm mt-2 w-4/5">
|
||||
Started on March 2025. I love macro photography of insects and
|
||||
flowers.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="relative overflow-hidden rounded-sm cursor-pointer"
|
||||
@click="openModal(index)"
|
||||
>
|
||||
<img
|
||||
:src="image.url"
|
||||
loading="lazy"
|
||||
class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UScrollArea>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user