From 918887a63f0c39a8e4687b8a29b69afd003c04af Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 10 Feb 2025 09:15:48 +0000
Subject: [PATCH] Merged in fix/hotel-rooms (pull request #1288)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: Rooms images on hotel pages

* fix: Rooms images on hotel pages


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
---
 components/ContentType/HotelPage/Rooms/RoomCard/index.tsx | 3 ++-
 components/ImageGallery/index.tsx                         | 3 ++-
 types/components/imageGallery.ts                          | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index 7d8c97def..8fc126976 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -36,7 +36,8 @@ export function RoomCard({ room }: RoomCardProps) {
             { id: "{title} - Image gallery" },
             { title: name }
           )}
-          height={200}
+          fill
+          sizes="(min-width: 768px) 320px, 100vw"
         />
       </div>
       <div className={styles.content}>
diff --git a/components/ImageGallery/index.tsx b/components/ImageGallery/index.tsx
index a6e969162..ecafeaa4e 100644
--- a/components/ImageGallery/index.tsx
+++ b/components/ImageGallery/index.tsx
@@ -18,11 +18,12 @@ function ImageGallery({
   title,
   fill,
   height = 280,
+  sizes,
 }: ImageGalleryProps) {
   const intl = useIntl()
   const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
   const [imageError, setImageError] = useState(false)
-  const imageProps = fill ? { fill } : { height, width: height * 1.5 }
+  const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
 
   if (!images || images.length === 0 || imageError) {
     return <div className={styles.imagePlaceholder} />
diff --git a/types/components/imageGallery.ts b/types/components/imageGallery.ts
index 40fb70916..f5f18cfe6 100644
--- a/types/components/imageGallery.ts
+++ b/types/components/imageGallery.ts
@@ -11,4 +11,5 @@ export type ImageGalleryProps = {
   fill?: boolean
   width?: number
   height?: number
+  sizes?: string
 }