Add new image size for fronts cards

domlander · domlander · commit f7c14689825f · 2025-08-20T12:16:34.000+01:00
diff --git a/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx b/dotcom-rendering/src/components/Card/components/ContentWrapper.tsx
@@ -30,24 +30,43 @@ const flexBasisStyles = ({
 		`;
 	}
 
+	if (!isBetaContainer) {
+		switch (imageSize) {
+			default:
+			case 'small':
+				return css`
+					flex-basis: 75%;
+					${between.tablet.and.desktop} {
+						flex-basis: 60%;
+					}
+					${from.desktop} {
+						flex-basis: 70%;
+					}
+				`;
+			case 'medium':
+				return css`
+					${from.tablet} {
+						flex-basis: 50%;
+					}
+				`;
+			case 'large':
+				return css`
+					${from.tablet} {
+						flex-basis: 34%;
+					}
+				`;
+			case 'jumbo':
+				return css`
+					${from.tablet} {
+						flex-basis: 25%;
+					}
+				`;
+		}
+	}
+
 	switch (imageSize) {
 		default:
 		case 'small':
-			return isBetaContainer
-				? css`
-						${from.tablet} {
-							flex-basis: 50%;
-						}
-				  `
-				: css`
-						flex-basis: 75%;
-						${between.tablet.and.desktop} {
-							flex-basis: 60%;
-						}
-						${from.desktop} {
-							flex-basis: 70%;
-						}
-				  `;
 		case 'medium':
 			return css`
 				${from.tablet} {
@@ -57,14 +76,24 @@ const flexBasisStyles = ({
 		case 'large':
 			return css`
 				${from.tablet} {
-					flex-basis: 34%;
+					flex-basis: 220px;
+				}
+				${from.desktop} {
+					flex-basis: 300px;
 				}
 			`;
-		case 'jumbo':
+		case 'xlarge':
 			return css`
 				${from.tablet} {
-					flex-basis: 25%;
+					flex-basis: 160px;
 				}
+				${from.desktop} {
+					flex-basis: 220px;
+				}
+			`;
+		case 'jumbo':
+			return css`
+				flex-basis: 100%;
 			`;
 	}
 };
diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
@@ -23,6 +23,7 @@ export type ImageSizeType =
 	| 'medium'
 	| 'large'
 	| 'jumbo'
+	| 'xlarge'
 	| 'carousel'
 	| 'podcast'
 	| 'highlights-card'
@@ -87,33 +88,62 @@ const flexBasisStyles = ({
 	imageSize: ImageSizeType;
 	isBetaContainer: boolean;
 }): SerializedStyles => {
+	if (!isBetaContainer) {
+		switch (imageSize) {
+			default:
+			case 'small':
+				return css`
+					flex-basis: 25%;
+					${between.tablet.and.desktop} {
+						flex-basis: 40%;
+					}
+					${from.desktop} {
+						flex-basis: 30%;
+					}
+				`;
+			case 'medium':
+				return css`
+					flex-basis: 50%;
+				`;
+			case 'large':
+				return css`
+					flex-basis: 66%;
+				`;
+			case 'jumbo':
+				return css`
+					flex-basis: 75%;
+				`;
+		}
+	}
+
 	switch (imageSize) {
 		default:
 		case 'small':
-			return isBetaContainer
-				? css`
-						flex-basis: 50%;
-				  `
-				: css`
-						flex-basis: 25%;
-						${between.tablet.and.desktop} {
-							flex-basis: 40%;
-						}
-						${from.desktop} {
-							flex-basis: 30%;
-						}
-				  `;
 		case 'medium':
 			return css`
 				flex-basis: 50%;
 			`;
 		case 'large':
 			return css`
-				flex-basis: 66%;
+				${from.tablet} {
+					flex-basis: 460px;
+				}
+				${from.desktop} {
+					flex-basis: 620px;
+				}
+			`;
+		case 'xlarge':
+			return css`
+				${from.tablet} {
+					flex-basis: 520px;
+				}
+				${from.desktop} {
+					flex-basis: 700px;
+				}
 			`;
 		case 'jumbo':
 			return css`
-				flex-basis: 75%;
+				flex-basis: 100%;
 			`;
 	}
 };
diff --git a/dotcom-rendering/src/components/CardPicture.tsx b/dotcom-rendering/src/components/CardPicture.tsx
@@ -24,8 +24,6 @@ export type Props = {
 /**
  * **WIP – Some size may be unaccounted for**
  *
- * Currently, this only handles the five (5) image sizes of `ImageSizeType`.
- *
  * This method should cover all use cases with a lot more precision once
  * implemented thoroughly
  */
@@ -68,6 +66,18 @@ const decideImageWidths = (
 			];
 
 		case 'large':
+			return [
+				{ breakpoint: breakpoints.mobile, width: 465, aspectRatio },
+				{
+					breakpoint: breakpoints.mobileLandscape,
+					width: 480,
+					aspectRatio,
+				},
+				{ breakpoint: breakpoints.tablet, width: 460, aspectRatio },
+				{ breakpoint: breakpoints.desktop, width: 620, aspectRatio },
+			];
+
+		case 'xlarge':
 			return [
 				{ breakpoint: breakpoints.mobile, width: 465, aspectRatio },
 				{
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -192,7 +192,7 @@ const decideSplashCardProperties = (
 				},
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
-				imageSize: avatarUrl ? 'large' : 'jumbo',
+				imageSize: avatarUrl ? 'large' : 'xlarge',
 				supportingContentAlignment:
 					supportingContentLength >= 4 ? 'horizontal' : 'vertical',
 				liveUpdatesAlignment: 'vertical',
@@ -372,7 +372,7 @@ const decideCardProperties = (
 					tablet: 'small',
 					mobile: 'medium',
 				},
-				imageSize: 'jumbo',
+				imageSize: 'xlarge',
 				liveUpdatesPosition: 'outer',
 				supportingContentAlignment:
 					supportingContentLength >= 2 ? 'horizontal' : 'vertical',
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -9,7 +9,10 @@ import type {
 	DCRFrontCard,
 	DCRGroupedTrails,
 } from '../types/front';
-import type { ImagePositionType } from './Card/components/ImageWrapper';
+import type {
+	ImagePositionType,
+	ImageSizeType,
+} from './Card/components/ImageWrapper';
 import { LI } from './Card/components/LI';
 import type { TrailTextSize } from './Card/components/TrailText';
 import { UL } from './Card/components/UL';
@@ -33,6 +36,7 @@ type Props = {
 
 type BoostProperties = {
 	headlineSizes: ResponsiveFontSize;
+	imageSize: ImageSizeType;
 	imagePositionOnDesktop: ImagePositionType;
 	imagePositionOnMobile: ImagePositionType;
 	supportingContentAlignment: Alignment;
@@ -59,6 +63,7 @@ const determineCardProperties = (
 					tablet: 'large',
 					mobile: 'medium',
 				},
+				imageSize: 'xlarge',
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
 				supportingContentAlignment:
@@ -73,6 +78,7 @@ const determineCardProperties = (
 					tablet: 'xlarge',
 					mobile: 'large',
 				},
+				imageSize: 'xlarge',
 				imagePositionOnDesktop: 'right',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
 				supportingContentAlignment:
@@ -87,6 +93,7 @@ const determineCardProperties = (
 					tablet: 'xlarge',
 					mobile: 'xlarge',
 				},
+				imageSize: 'jumbo',
 				imagePositionOnDesktop: mediaCard ? 'top' : 'bottom',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
 				supportingContentAlignment: 'horizontal',
@@ -100,6 +107,7 @@ const determineCardProperties = (
 					tablet: 'xxlarge',
 					mobile: 'xxlarge',
 				},
+				imageSize: 'jumbo',
 				imagePositionOnDesktop: mediaCard ? 'top' : 'bottom',
 				imagePositionOnMobile: mediaCard ? 'top' : 'bottom',
 				supportingContentAlignment: 'horizontal',
@@ -143,6 +151,7 @@ export const OneCardLayout = ({
 
 	const {
 		headlineSizes,
+		imageSize,
 		imagePositionOnDesktop,
 		imagePositionOnMobile,
 		supportingContentAlignment,
@@ -166,7 +175,7 @@ export const OneCardLayout = ({
 					headlineSizes={headlineSizes}
 					imagePositionOnDesktop={imagePositionOnDesktop}
 					imagePositionOnMobile={imagePositionOnMobile}
-					imageSize={'jumbo'}
+					imageSize={imageSize}
 					trailText={card.trailText}
 					supportingContent={card.supportingContent}
 					supportingContentAlignment={supportingContentAlignment}
