fix(SW-272): fixed issue with image sizes and aspect ratio on cards mainly inside mega menu

components/TempDesignSystem/Card/card.ts

@@ -23,6 +23,8 @@ export interface CardProps
   heading?: string | null
   bodyText?: string | null
   backgroundImage?: ImageVaultAsset
+  imageHeight?: number
+  imageWidth?: number
   onPrimaryButtonClick?: () => void
   onSecondaryButtonClick?: () => void
 }

components/TempDesignSystem/Card/index.tsx

@@ -21,11 +21,20 @@ export default function Card({
   className,
   theme,
   backgroundImage,
+  imageHeight,
+  imageWidth,
   onPrimaryButtonClick,
   onSecondaryButtonClick,
 }: CardProps) {
   const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme)
 
+  imageHeight = imageHeight || 320
+  imageWidth =
+    imageWidth ||
+    (backgroundImage
+      ? backgroundImage.dimensions.aspectRatio * imageHeight
+      : 420)
+
   return (
     <article
       className={cardVariants({
@@ -39,8 +48,8 @@ export default function Card({
             src={backgroundImage.url}
             className={styles.image}
             alt={backgroundImage.meta.alt || backgroundImage.title}
-            width={backgroundImage.dimensions.width || 420}
+            width={imageWidth}
-            height={backgroundImage.dimensions.height || 320}
+            height={imageHeight}
           />
         </div>
       )}

server/routers/contentstack/schemas/imageVault.ts

@@ -105,9 +105,14 @@ export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
     const caption = rawData.Metadata?.find((meta) =>
       meta.Name.includes("Title_")
     )?.Value
+    const mediaConversion = rawData.MediaConversions[0]
+    const aspectRatio =
+      mediaConversion.FormatAspectRatio ||
+      mediaConversion.AspectRatio ||
+      mediaConversion.Width / mediaConversion.Height
 
     return {
-      url: rawData.MediaConversions[0].Url,
+      url: mediaConversion.Url,
       id: rawData.Id,
       meta: {
         alt,
@@ -115,9 +120,9 @@ export const imageVaultAssetTransformedSchema = imageVaultAssetSchema.transform(
       },
       title: rawData.Name,
       dimensions: {
-        width: rawData.MediaConversions[0].Width,
+        width: mediaConversion.Width,
-        height: rawData.MediaConversions[0].Height,
+        height: mediaConversion.Height,
-        aspectRatio: rawData.MediaConversions[0].FormatAspectRatio,
+        aspectRatio,
       },
     }
   }

utils/imageVault.ts

@@ -14,8 +14,14 @@ export function insertResponseToImageVaultAsset(
     meta.Name.includes("Title_")
   )?.Value
 
+  const mediaConversion = response.MediaConversions[0]
+  const aspectRatio =
+    mediaConversion.FormatAspectRatio ||
+    mediaConversion.AspectRatio ||
+    mediaConversion.Width / mediaConversion.Height
+
   return {
-    url: response.MediaConversions[0].Url,
+    url: mediaConversion.Url,
     id: response.Id,
     meta: {
       alt,
@@ -23,9 +29,9 @@ export function insertResponseToImageVaultAsset(
     },
     title: response.Name,
     dimensions: {
-      width: response.MediaConversions[0].Width,
+      width: mediaConversion.Width,
-      height: response.MediaConversions[0].Height,
+      height: mediaConversion.Height,
-      aspectRatio: response.MediaConversions[0].FormatAspectRatio,
+      aspectRatio,
     },
   }
 }