Podcast series image on cards (#13072)

* Add fixed image sizes for podcast series image * Display podcast series image if available * Update flex styling to account for podcast type * refactor duplicated css styles
guardian · Jan 9, 2025 · b4ea0b2 · b4ea0b2
1 parent a501cb7
commit b4ea0b2
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -186,6 +186,35 @@ const HorizontalDivider = () => (
 	/>
 );
 
+const podcastImageStyles = (imageSize: ImageSizeType) => {
+	switch (imageSize) {
+		case 'small':
+			return css`
+				width: 69px;
+				height: 69px;
+				${from.tablet} {
+					width: 98px;
+					height: 98px;
+				}
+			`;
+
+		case 'medium':
+			return css`
+				width: 98px;
+				height: 98px;
+				${from.tablet} {
+					width: 120px;
+					height: 120px;
+				}
+			`;
+		default:
+			return css`
+				width: 120px;
+				height: 120px;
+			`;
+	}
+};
+
 const getMedia = ({
 	imageUrl,
 	imageAltText,
@@ -814,6 +843,31 @@ export const Card = ({
 						{media.type === 'crossword' && (
 							<img src={media.imageUrl} alt="" />
 						)}
+
+						{media.type === 'podcast' && (
+							<>
+								{media.podcastImage.src ? (
+									<div css={[podcastImageStyles(imageSize)]}>
+										<CardPicture
+											mainImage={media.podcastImage.src}
+											imageSize={'small'}
+											alt={media.imageAltText}
+											loading={imageLoading}
+											roundedCorners={isOnwardContent}
+											aspectRatio={'1:1'}
+										/>
+									</div>
+								) : (
+									<CardPicture
+										mainImage={media.trailImage.src ?? ''}
+										imageSize={imageSize}
+										alt={media.trailImage.altText}
+										loading={imageLoading}
+										aspectRatio={aspectRatio}
+									/>
+								)}
+							</>
+						)}
 					</ImageWrapper>
 				)}
 

diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx
@@ -135,12 +135,10 @@ export const ImageWrapper = ({
 	return (
 		<div
 			css={[
-				imageType === 'slideshow' &&
-					isHorizontalOnDesktop &&
-					flexBasisStyles({
-						imageSize,
-					}),
-				(imageType === 'picture' || imageType === 'video') &&
+				(imageType === 'slideshow' ||
+					imageType === 'picture' ||
+					imageType === 'video' ||
+					imageType === 'podcast') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
 						imageSize,