Merged in fix/hotel-rooms (pull request #1288)

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

@@ -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}>

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} />

types/components/imageGallery.ts

@@ -11,4 +11,5 @@ export type ImageGalleryProps = {
   fill?: boolean
   width?: number
   height?: number
+  sizes?: string
 }