Fix: Gallery

Author: CodeWithInferno

sanity/schemas/event.js

@@ -46,6 +46,29 @@ export default {
       title: 'RSVP Link',
       type: 'url',
     },
+    {
+      name: 'gallery',
+      title: 'Event Gallery',
+      type: 'array',
+      of: [
+        {
+          type: 'image',
+          fields: [
+            {
+              name: 'caption',
+              title: 'Caption',
+              type: 'string',
+              options: {
+                isHighlighted: true,
+              },
+            },
+          ],
+          options: {
+            hotspot: true,
+          },
+        },
+      ],
+    },
   ],
   preview: {
     select: {

src/app/gallery/GalleryClient.js

@@ -1,53 +1,66 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import styles from './gallery.module.css';
-import { client } from '@/sanity/lib/client';
-import imageUrlBuilder from '@sanity/image-url';
-
-const builder = imageUrlBuilder(client);
-const urlFor = (source) => builder.image(source);
 
 const GalleryClient = ({ images }) => {
   const [selectedImage, setSelectedImage] = useState(null);
 
   const openLightbox = (image) => setSelectedImage(image);
   const closeLightbox = () => setSelectedImage(null);
 
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        closeLightbox();
+      }
+    };
+
+    if (selectedImage) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [selectedImage]);
+
   return (
     <>
       <div className={styles.galleryGrid}>
         {images.map((image) => (
           <div
-            key={image._id}
+            key={image._key}
             className={styles.gridItem}
             onClick={() => openLightbox(image)}
           >
             <Image
-              src={urlFor(image.imageUrl).url()}
+              src={image.imageUrl}
               alt={image.alt}
               width={image.metadata.dimensions.width}
               height={image.metadata.dimensions.height}
               className={styles.image}
               sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
             />
             <div className={styles.overlay}>
-              <h3 className={styles.imageTitle}>{image.title}</h3>
+              <h3 className={styles.imageTitle}>{image.caption}</h3>
             </div>
           </div>
         ))}
       </div>
 
       {selectedImage && (
         <div className={styles.lightboxOverlay} onClick={closeLightbox}>
-          <button className={styles.closeButton}>&times;</button>
           <div
             className={styles.lightboxContent}
             onClick={(e) => e.stopPropagation()}
           >
+            <button className={styles.closeButton} onClick={closeLightbox}>
+              &times;
+            </button>
             <Image
-              src={urlFor(selectedImage.imageUrl).url()}
+              src={selectedImage.imageUrl}
               alt={selectedImage.alt}
               width={selectedImage.metadata.dimensions.width}
               height={selectedImage.metadata.dimensions.height}

src/app/gallery/gallery.module.css

@@ -32,43 +32,34 @@
   line-height: 1.6;
 }
 
-/* --- Asymmetrical Grid --- */
+/* --- Masonry Grid Layout --- */
 .galleryGrid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-auto-rows: 300px;
-  gap: 1.5rem;
+  column-count: 3; /* Default for large screens */
+  column-gap: 1.5rem;
 }
 
 .gridItem {
   position: relative;
   overflow: hidden;
   border: 2px solid var(--text-primary);
-  cursor: pointer; /* Add pointer cursor to indicate clickable */
+  cursor: pointer;
+  margin-bottom: 1.5rem; /* Space between rows */
+  break-inside: avoid; /* Prevents items from breaking across columns */
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
 }
 
-/* --- Specific Item Placement for a Curated Look --- */
-.gridItem:nth-child(1) { grid-column: span 6; grid-row: span 2; }
-.gridItem:nth-child(2) { grid-column: span 3; grid-row: span 1; }
-.gridItem:nth-child(3) { grid-column: span 3; grid-row: span 1; }
-.gridItem:nth-child(4) { grid-column: span 6; grid-row: span 2; }
-.gridItem:nth-child(5) { grid-column: span 3; grid-row: span 1; }
-.gridItem:nth-child(6) { grid-column: span 3; grid-row: span 2; }
-.gridItem:nth-child(7) { grid-column: span 3; grid-row: span 1; }
-.gridItem:nth-child(8) { grid-column: span 3; grid-row: span 1; }
-.gridItem:nth-child(9) { grid-column: span 6; grid-row: span 1; }
-
-
 .image {
   width: 100%;
-  height: 100%;
+  height: auto; /* Let height be natural */
   object-fit: cover;
   transition: transform 0.4s ease, opacity 0.4s ease;
+  display: block; /* Remove any bottom space */
 }
 
 .gridItem:hover .image {
   transform: scale(1.05);
-  opacity: 0.7; /* New hover effect */
+  opacity: 0.7;
 }
 
 /* --- Overlay & Title --- */
@@ -122,46 +113,44 @@
 
 .lightboxContent {
   position: relative;
-  max-width: 90vw;
-  max-height: 90vh;
+  width: 90vw;
+  height: 90vh;
 }
 
 .lightboxImage {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
 }
 
 .closeButton {
   position: absolute;
-  top: -2.5rem;
-  right: 0;
-  background: none;
+  top: 1rem;
+  right: 1rem;
+  background: rgba(0, 0, 0, 0.5);
   border: none;
   color: white;
-  font-size: 2.5rem;
+  font-size: 2rem;
   cursor: pointer;
+  z-index: 1001; /* Ensure it's above the image */
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
 }
 
-
 /* --- Responsive Adjustments --- */
 @media (max-width: 1200px) {
-  .gridItem:nth-child(n) {
-    grid-column: span 6;
-    grid-row: span 1;
+  .galleryGrid {
+    column-count: 2; /* Two columns for tablets */
   }
-  .gridItem:nth-child(1) { grid-row: span 2; }
-  .gridItem:nth-child(4) { grid-row: span 2; }
 }
 
 @media (max-width: 768px) {
   .container { padding: 4rem 1rem; }
   .title { font-size: 3rem; }
-  .galleryGrid { grid-auto-rows: 250px; }
-  .gridItem:nth-child(n) {
-    grid-column: span 12;
-    grid-row: span 1;
+  .galleryGrid {
+    column-count: 1; /* Single column for mobile */
   }
 }

src/app/gallery/page.js

@@ -13,15 +13,18 @@ export const revalidate = 0;
 async function getGalleryImages() {
   noStore(); // 🔒 disable caching for this fetch path
 
-  const query = `*[_type == "galleryImage"] | order(_createdAt desc)[0...9]{
-    _id,
-    title,
-    alt,
-    "imageUrl": image.asset->url,
-    "metadata": image.asset->metadata
-  }`;
-
-  return client.fetch(query); // no { next:{...} } here
+  const query = `*[_type == "gallery"] | order(_createdAt desc) {
+    "images": images[]{
+      _key,
+      alt,
+      caption,
+      "imageUrl": image.asset->url,
+      "metadata": image.asset->metadata
+    }
+  }.images`;
+
+  const result = await client.fetch(query);
+  return result ? result.flat().slice(0, 9) : [];
 }
 
 export default async function GalleryPage() {

src/sanity/schemaTypes/gallery.js

@@ -0,0 +1,34 @@
+// src/sanity/schemaTypes/gallery.js
+export default {
+  name: 'gallery',
+  title: 'Gallery',
+  type: 'document',
+  fields: [
+    {
+      name: 'title',
+      title: 'Title',
+      type: 'string',
+      description: 'A title for this gallery collection (e.g., "Workshop Photos").',
+      validation: (Rule) => Rule.required(),
+    },
+    {
+      name: 'images',
+      title: 'Images',
+      type: 'array',
+      of: [
+        {
+          type: 'galleryImage',
+        },
+      ],
+      options: {
+        layout: 'grid',
+      },
+    },
+  ],
+  preview: {
+    select: {
+      title: 'title',
+      media: 'images.0.image.asset'
+    }
+  }
+}

src/sanity/schemaTypes/galleryImage.js

@@ -2,14 +2,8 @@
 export default {
   name: 'galleryImage',
   title: 'Gallery Image',
-  type: 'document',
+  type: 'object',
   fields: [
-    {
-      name: 'title',
-      title: 'Title',
-      type: 'string',
-      description: 'A descriptive title for the image.',
-    },
     {
       name: 'image',
       title: 'Image',
@@ -19,12 +13,19 @@ export default {
       },
       validation: (Rule) => Rule.required(),
     },
+    {
+      name: 'caption',
+      title: 'Caption',
+      type: 'string',
+      options: {
+        isHighlighted: true,
+      },
+    },
     {
       name: 'alt',
       title: 'Alternative Text',
       type: 'string',
       description: 'Important for accessibility. Describe the image for screen readers.',
-      validation: (Rule) => Rule.required(),
     },
   ],
 }

src/sanity/schemaTypes/index.js

@@ -1,8 +1,9 @@
 import event from './event'
 import member from './member'
-import galleryImage from './galleryImage'
 import project from './project'
 import projectProposal from './projectProposal'
+import gallery from './gallery'
+import galleryImage from './galleryImage'
 
-export const schemaTypes = [event, member, galleryImage, project, projectProposal]
+export const schemaTypes = [event, member, project, projectProposal, gallery, galleryImage]
 

src/sanity/structure.js

@@ -23,7 +23,7 @@ export const structure = (S) =>
         .title('Projects')
         .child(S.documentList().title('Projects').filter('_type == "project"')),
       S.listItem()
-        .title('Gallery Images')
-        .child(S.documentList().title('Gallery Images').filter('_type == "galleryImage"')),
+        .title('Galleries')
+        .child(S.documentList().title('Galleries').filter('_type == "gallery"')),
     ])