feat/SW-689-image-gallery-sizes (pull request #781)

Feat/SW-689 image gallery sizes

* feat(SW-689): initial gallery changes

* feat(SW-689): remove console.log

* feat(SW-689): remove unneccessary code

* feat(SW-689): change sizes

* feat(SW-689): change size

* feat(SW-689): add design for ipad for fullview

* feat(SW-689): fix import type

* feat(SW-689): fix tripAdvisor placement

* feat(SW-689): fix image gallery type

* feat(SW-689): fix check gallery length


Approved-by: Christian Andolf
Approved-by: Matilda Landström

components/Lightbox/Gallery.tsx

@@ -20,7 +20,7 @@ export default function Gallery({
   selectedImage,
 }: GalleryProps) {
   const mainImage = selectedImage || images[0]
-  const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)
+  const mainImageIndex = images.findIndex((img) => img === mainImage)
 
   function getThumbImages() {
     const thumbs = []
@@ -55,16 +55,18 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <div className={styles.galleryHeader}>
-          {mainImage.title && (
+          {mainImage.metaData.title && (
             <div className={styles.imageCaption}>
-              <Caption color="textMediumContrast">{mainImage.title}</Caption>
+              <Caption color="textMediumContrast">
+                {mainImage.metaData.title}
+              </Caption>
             </div>
           )}
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} mode="wait">
             <motion.div
-              key={mainImage.url}
+              key={mainImage.imageSizes.medium}
               className={styles.mainImageContainer}
               initial={{ opacity: 0, x: 300 }}
               animate={{ opacity: 1, x: 0 }}
@@ -72,10 +74,10 @@ export default function Gallery({
               transition={{ duration: 0.3 }}
             >
               <Image
-                src={mainImage.url}
-                alt={mainImage.alt}
-                layout="fill"
-                objectFit="cover"
+                src={mainImage.imageSizes.medium}
+                alt={mainImage.metaData.altText}
+                fill
+                className={styles.image}
                 onClick={onImageClick}
               />
             </motion.div>
@@ -100,7 +102,7 @@ export default function Gallery({
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div
-                key={image.url}
+                key={image.imageSizes.tiny}
                 className={styles.thumbnailContainer}
                 onClick={() => onSelectImage(image)}
                 initial={{ opacity: 0, x: 50 }}
@@ -109,10 +111,10 @@ export default function Gallery({
                 transition={{ duration: 0.2, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.url}
-                  alt={image.alt}
-                  layout="fill"
-                  objectFit="cover"
+                  src={image.imageSizes.tiny}
+                  alt={image.metaData.altText}
+                  fill
+                  className={styles.image}
                 />
               </motion.div>
             ))}
@@ -139,7 +141,7 @@ export default function Gallery({
           <div className={styles.thumbnailGrid}>
             {images.map((image, index) => (
               <motion.div
-                key={image.url}
+                key={image.imageSizes.small}
                 className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
                 onClick={() => {
                   onSelectImage(image)
@@ -150,10 +152,10 @@ export default function Gallery({
                 transition={{ duration: 0.3, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.url}
-                  alt={image.alt}
-                  layout="fill"
-                  objectFit="cover"
+                  src={image.imageSizes.small}
+                  alt={image.metaData.altText}
+                  fill
+                  className={styles.image}
                 />
               </motion.div>
             ))}