Merged in fix/card-width-fix (pull request #1369)

feat(images): calculate width correct using aspect ratio

* feat(images): calculate width correct using aspect ratio


Approved-by: Erik Tiekstra

components/ContentType/DestinationPage/TopImages/index.tsx

@@ -30,25 +30,30 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
   return (
     <div className={styles.topImages}>
       <div className={styles.imageWrapper}>
-        {visibleImages.map((image, index) => (
-          <Image
-            key={image.url}
-            src={image.url}
-            alt={image.meta.alt || image.meta.caption || ""}
-            width={index === 0 ? maxWidth : maxWidth / visibleImages.length}
-            height={Math.ceil(
-              (index === 0 ? maxWidth : maxWidth / visibleImages.length) /
-                image.dimensions.aspectRatio
-            )}
-            focalPoint={image.focalPoint}
-            className={`${styles.image} ${images.length > 1 ? styles.clickable : ""}`}
-            onClick={() =>
-              images.length
-                ? setLightboxState({ open: true, activeIndex: index })
-                : null
-            }
-          />
-        ))}
+        {visibleImages.map((image, index) => {
+          const width = index === 0 ? maxWidth : maxWidth / visibleImages.length
+          const height =
+            image.dimensions.aspectRatio >= 1
+              ? Math.ceil(width / image.dimensions.aspectRatio)
+              : Math.ceil(width * image.dimensions.aspectRatio)
+
+          return (
+            <Image
+              key={image.url}
+              src={image.url}
+              alt={image.meta.alt || image.meta.caption || ""}
+              width={width}
+              height={height}
+              focalPoint={image.focalPoint}
+              className={`${styles.image} ${images.length > 1 ? styles.clickable : ""}`}
+              onClick={() =>
+                images.length
+                  ? setLightboxState({ open: true, activeIndex: index })
+                  : null
+              }
+            />
+          )
+        })}
       </div>
       {images.length > 1 && (
         <>

components/TempDesignSystem/Card/index.tsx

@@ -44,7 +44,9 @@ export default function Card({
   imageWidth =
     imageWidth ||
     (backgroundImage?.dimensions
-      ? backgroundImage.dimensions.aspectRatio * imageHeight
+      ? backgroundImage.dimensions.aspectRatio >= 1
+        ? backgroundImage.dimensions.aspectRatio * imageHeight
+        : imageHeight / backgroundImage.dimensions.aspectRatio
       : 420)
 
   return (

components/TempDesignSystem/TeaserCard/index.tsx

@@ -25,6 +25,14 @@ export default function TeaserCard({
 }: TeaserCardProps) {
   const classNames = teaserCardVariants({ intent, alwaysStack, className })
 
+  const imageWidth =
+    image &&
+    Math.ceil(
+      image.dimensions.aspectRatio >= 1
+        ? image.dimensions.aspectRatio * 200
+        : 200 / image.dimensions.aspectRatio
+    )
+
   return (
     <article className={classNames}>
       {image && (
@@ -32,7 +40,7 @@ export default function TeaserCard({
           src={image.url}
           alt={image.meta?.alt || ""}
           className={styles.image}
-          width={Math.ceil(image.dimensions.aspectRatio * 200)}
+          width={imageWidth}
           height={200}
           focalPoint={image.focalPoint}
         />