Add field for film used in photos

web/src/components/photos/carousel.astro

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

web/src/pages/photos/index.astro

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