Render podcast image when it is a small or medium image

guardian · Dec 17, 2024 · 9dbff5e · 9dbff5e
1 parent 63924da
commit 9dbff5e
Showing 1 changed file with 47 additions and 0 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -288,6 +288,34 @@ export const isWithinTwelveHours = (webPublicationDate: string): boolean => {
 	return timeDiffHours <= 12;
 };
 
+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;
+			`;
+	}
+};
 export const Card = ({
 	linkTo,
 	format,
@@ -800,6 +828,25 @@ export const Card = ({
 						{media.type === 'crossword' && (
 							<img src={media.imageUrl} alt="" />
 						)}
+						{media.type === 'podcast' && media.podcastImage.src && (
+							<div
+								css={[
+									css`
+										margin: 8px;
+									`,
+									podcastImageStyles(imageSize),
+								]}
+							>
+								<CardPicture
+									mainImage={media.podcastImage.src}
+									imageSize={imageSize}
+									alt={media.imageAltText}
+									loading={imageLoading}
+									roundedCorners={isOnwardContent}
+									aspectRatio={'1:1'}
+								/>
+							</div>
+						)}
 					</ImageWrapper>
 				)}