Add field for film used in photos

This commit is contained in:
2025-11-19 23:02:40 +13:00
parent facb2b0f99
commit 4bad9e095e
2 changed files with 6 additions and 0 deletions

View File

@@ -26,6 +26,7 @@ const photoLinks = await Promise.all(
const photoLinks = photoLinksElement ? JSON.parse(photoLinksElement.textContent || '[]') : []; const photoLinks = photoLinksElement ? JSON.parse(photoLinksElement.textContent || '[]') : [];
const titleEl = document.getElementById('photo-title'); const titleEl = document.getElementById('photo-title');
const cameraEl = document.getElementById('photo-camera'); const cameraEl = document.getElementById('photo-camera');
const filmEl = document.getElementById('photo-film');
const locationEl = document.getElementById('photo-location'); const locationEl = document.getElementById('photo-location');
const currentPosIndicator = document.getElementById('current-pos'); const currentPosIndicator = document.getElementById('current-pos');
const maxPosIndicator = document.getElementById('max-pos'); const maxPosIndicator = document.getElementById('max-pos');
@@ -49,6 +50,7 @@ const photoLinks = await Promise.all(
const swiper = new Swiper('.swiper', { const swiper = new Swiper('.swiper', {
modules: [Navigation, Keyboard, EffectFade], modules: [Navigation, Keyboard, EffectFade],
spaceBetween: 20,
effect: 'cards', effect: 'cards',
fadeEffect: { fadeEffect: {
crossFade: true crossFade: true
@@ -78,6 +80,9 @@ const photoLinks = await Promise.all(
if (cameraEl && currentPhoto) { if (cameraEl && currentPhoto) {
cameraEl.textContent = `📸 ${currentPhoto.camera}`; cameraEl.textContent = `📸 ${currentPhoto.camera}`;
} }
if (filmEl && currentPhoto) {
filmEl.textContent = currentPhoto.film !== "" ? `🎞️ ${currentPhoto.film}` : "";
}
if (locationEl && currentPhoto) { if (locationEl && currentPhoto) {
locationEl.textContent = `📌 ${currentPhoto.location}`; locationEl.textContent = `📌 ${currentPhoto.location}`;
} }

View File

@@ -15,6 +15,7 @@ const photos = await pb.collection('photos').getFullList({
<div slot="sidebar"> <div slot="sidebar">
<p id="photo-title" class="bold text-2xl">{photos[0].title === "" ? "Untitled" : photos[0].title}</p> <p id="photo-title" class="bold text-2xl">{photos[0].title === "" ? "Untitled" : photos[0].title}</p>
<p id="photo-camera" class="text-sm">📸 {photos[0].camera}</p> <p id="photo-camera" class="text-sm">📸 {photos[0].camera}</p>
<p id="photo-film" class="text-sm">{photos[0].film !== "" ? `🎞️ ${photos[0].film}` : ""}</p>
<p id="photo-location" class="text-sm">📌 {photos[0].location}</p> <p id="photo-location" class="text-sm">📌 {photos[0].location}</p>
<!-- <button id="dec-button" onclick="dec()">&lt;</button> --> <!-- <button id="dec-button" onclick="dec()">&lt;</button> -->