Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)

components/Lightbox/Gallery.tsx

@@ -79,18 +79,16 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <div className={styles.galleryHeader}>
-          {mainImage.metaData.title && (
+          {mainImage.caption && (
             <div className={styles.imageCaption}>
-              <Caption color="textMediumContrast">
-                {mainImage.metaData.title}
-              </Caption>
+              <Caption color="textMediumContrast">{mainImage.caption}</Caption>
             </div>
           )}
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} custom={animateLeft}>
             <motion.div
-              key={mainImage.imageSizes.medium}
+              key={mainImage.src}
               className={styles.mainImageContainer}
               custom={animateLeft}
               variants={variants}
@@ -100,9 +98,10 @@ export default function Gallery({
               transition={{ duration: 0.3 }}
             >
               <Image
-                src={mainImage.imageSizes.medium}
-                alt={mainImage.metaData.altText}
+                src={mainImage.src}
+                alt={mainImage.alt}
                 fill
+                sizes="(min-width: 1000px) 1000px, 100vw"
                 className={styles.image}
                 onClick={onImageClick}
               />
@@ -128,7 +127,7 @@ export default function Gallery({
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div
-                key={image.imageSizes.tiny}
+                key={image.smallSrc || image.src}
                 className={styles.thumbnailContainer}
                 onClick={() => onSelectImage(image)}
                 initial={{ opacity: 0, x: 50 }}
@@ -137,9 +136,10 @@ export default function Gallery({
                 transition={{ duration: 0.2, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.imageSizes.tiny}
-                  alt={image.metaData.altText}
+                  src={image.smallSrc || image.src}
+                  alt={image.alt}
                   fill
+                  sizes="200px"
                   className={styles.image}
                 />
               </motion.div>
@@ -154,7 +154,7 @@ export default function Gallery({
           <div className={styles.thumbnailGrid}>
             {images.map((image, index) => (
               <motion.div
-                key={image.imageSizes.small}
+                key={image.smallSrc || image.src}
                 className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
                 onClick={() => {
                   onSelectImage(image)
@@ -165,9 +165,10 @@ export default function Gallery({
                 transition={{ duration: 0.3, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.imageSizes.small}
-                  alt={image.metaData.altText}
+                  src={image.smallSrc || image.src}
+                  alt={image.alt}
                   fill
+                  sizes="100vw"
                   className={styles.image}
                 />
               </motion.div>