feat(gallery): load and display exif data
This commit is contained in:
@@ -1,19 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
type ImageMetadata = {
|
||||
url: string;
|
||||
date: string;
|
||||
camera: string;
|
||||
lens: string;
|
||||
settings?: {
|
||||
aperture?: string;
|
||||
shutter?: string;
|
||||
iso?: string;
|
||||
focalLength?: string;
|
||||
};
|
||||
};
|
||||
import type { InternalApi } from "nitropack/types";
|
||||
|
||||
const props = defineProps<{
|
||||
images: ImageMetadata[];
|
||||
images: InternalApi["/api/gallery"]["get"][number][];
|
||||
initialIndex: number;
|
||||
}>();
|
||||
|
||||
@@ -76,24 +65,16 @@ const currentIndex = ref(props.initialIndex);
|
||||
<div
|
||||
class="bg-black px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
|
||||
>
|
||||
<span>{{ item.date }}</span>
|
||||
<span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
|
||||
<span class="text-white/50">|</span>
|
||||
<span>{{ item.camera }}</span>
|
||||
<span>{{ item.exif.camera }}</span>
|
||||
<span class="text-white/50">|</span>
|
||||
<span>{{ item.lens }}</span>
|
||||
<template v-if="item.settings">
|
||||
<span>{{ item.exif.lens }}</span>
|
||||
<span class="text-white/50">|</span>
|
||||
<span v-if="item.settings.aperture">{{
|
||||
item.settings.aperture
|
||||
}}</span>
|
||||
<span v-if="item.settings.shutter">{{
|
||||
item.settings.shutter
|
||||
}}</span>
|
||||
<span v-if="item.settings.iso">ISO {{ item.settings.iso }}</span>
|
||||
<span v-if="item.settings.focalLength">{{
|
||||
item.settings.focalLength
|
||||
}}</span>
|
||||
</template>
|
||||
<span>{{ item.exif.settings.aperture }}</span>
|
||||
<span>{{ item.exif.settings.shutter }}</span>
|
||||
<span>ISO {{ item.exif.settings.iso }}</span>
|
||||
<span>{{ item.exif.settings.focalLength }}</span>
|
||||
</div>
|
||||
</UCarousel>
|
||||
|
||||
|
||||
@@ -1,213 +1,78 @@
|
||||
<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 openModal = async (index: number) => {
|
||||
const instance = galleryModal.open({
|
||||
images,
|
||||
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" });
|
||||
}
|
||||
}
|
||||
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">
|
||||
<template #default="{ item: image, index }">
|
||||
<header v-if="index === 0" class="pr-2 pb-6">
|
||||
<UButton
|
||||
icon="i-lucide-arrow-left"
|
||||
size="md"
|
||||
@@ -222,23 +87,22 @@ onUnmounted(() => {
|
||||
|
||||
<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
|
||||
Started on March 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)"
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
</UScrollArea>
|
||||
</template>
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
"@tresjs/cientos": "^5.1.2",
|
||||
"@tresjs/core": "^5.2.0",
|
||||
"@tresjs/nuxt": "^5.1.2",
|
||||
"exifr": "^7.1.3",
|
||||
"gsap": "3.13.0",
|
||||
"pinia": "3.0.4",
|
||||
"tailwindcss": "^4.1.18",
|
||||
|
||||
11
pnpm-lock.yaml
generated
11
pnpm-lock.yaml
generated
@@ -16,6 +16,9 @@ importers:
|
||||
"@tresjs/nuxt":
|
||||
specifier: ^5.1.2
|
||||
version: 5.1.2(f1341efb47d1338baf7454f3b929107c)
|
||||
exifr:
|
||||
specifier: ^7.1.3
|
||||
version: 7.1.3
|
||||
gsap:
|
||||
specifier: 3.13.0
|
||||
version: 3.13.0
|
||||
@@ -5572,6 +5575,12 @@ packages:
|
||||
}
|
||||
engines: { node: ">=16.17" }
|
||||
|
||||
exifr@7.1.3:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw==,
|
||||
}
|
||||
|
||||
expand-template@2.0.3:
|
||||
resolution:
|
||||
{
|
||||
@@ -14097,6 +14106,8 @@ snapshots:
|
||||
signal-exit: 4.1.0
|
||||
strip-final-newline: 3.0.0
|
||||
|
||||
exifr@7.1.3: {}
|
||||
|
||||
expand-template@2.0.3: {}
|
||||
|
||||
exsolve@1.0.8: {}
|
||||
|
||||
82
server/api/gallery.get.ts
Normal file
82
server/api/gallery.get.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { readdir } from "fs/promises";
|
||||
import { join } from "path";
|
||||
import exifr from "exifr";
|
||||
import { z } from "zod";
|
||||
|
||||
const exifSchema = z.object({
|
||||
DateTimeOriginal: z.date(),
|
||||
Make: z.string(),
|
||||
Model: z.string(),
|
||||
LensModel: z.string(),
|
||||
FNumber: z.number(),
|
||||
ExposureTime: z.number(),
|
||||
ISO: z.number(),
|
||||
FocalLength: z.number(),
|
||||
});
|
||||
|
||||
export default defineCachedEventHandler(
|
||||
async () => {
|
||||
const publicDir = join(process.cwd(), "public/gallery");
|
||||
|
||||
try {
|
||||
const files = await readdir(publicDir);
|
||||
const imageFiles = files.filter((file) =>
|
||||
/\.(jpg|jpeg|png|webp)$/i.test(file),
|
||||
);
|
||||
|
||||
const imagesWithExif = await Promise.all(
|
||||
imageFiles.map(async (filename) => {
|
||||
const filePath = join(publicDir, filename);
|
||||
const rawExif = await exifr.parse(filePath, {
|
||||
tiff: true,
|
||||
exif: true,
|
||||
gps: false,
|
||||
interop: false,
|
||||
ifd1: false,
|
||||
});
|
||||
|
||||
const exif = exifSchema.parse(rawExif);
|
||||
|
||||
return {
|
||||
filename,
|
||||
url: `/gallery/${filename}`,
|
||||
exif: {
|
||||
date: exif.DateTimeOriginal,
|
||||
camera: `${exif.Make} ${exif.Model}`,
|
||||
lens: exif.LensModel,
|
||||
settings: {
|
||||
aperture: `f/${exif.FNumber}`,
|
||||
shutter: `1/${Math.round(1 / exif.ExposureTime)}s`,
|
||||
iso: String(exif.ISO),
|
||||
focalLength: `${exif.FocalLength}mm`,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
return imagesWithExif;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
message: "Failed to read gallery directory",
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
maxAge: 60 * 60 * 24,
|
||||
getKey: async () => {
|
||||
const publicDir = join(process.cwd(), "public/gallery");
|
||||
try {
|
||||
const files = await readdir(publicDir);
|
||||
const imageFiles = files.filter((file) =>
|
||||
/\.(jpg|jpeg|png|webp)$/i.test(file),
|
||||
);
|
||||
return `gallery:${imageFiles.length}`;
|
||||
} catch {
|
||||
return "gallery:0";
|
||||
}
|
||||
},
|
||||
},
|
||||
);
|
||||
Reference in New Issue
Block a user