From 9fcf2ca6a00da994b0740c3fcde0206c49085daa Mon Sep 17 00:00:00 2001
From: Oliver Abrahams <ollie.abrahams@guardian.co.uk>
Date: Thu, 24 Oct 2024 15:45:44 +0100
Subject: [PATCH] Add support for podcast image i n Picture.tsx (#12568)

---
 dotcom-rendering/src/components/Picture.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx
index b95b977d0c..70f27577fc 100644
--- a/dotcom-rendering/src/components/Picture.tsx
+++ b/dotcom-rendering/src/components/Picture.tsx
@@ -16,8 +16,13 @@ import type { Loading } from './CardPicture';
 
 export type Orientation = 'portrait' | 'landscape';
 
+type PictureRoleType =
+	| RoleType
+	// Custom image role types that are used but do not come from CAPI / FE
+	| 'podcastCover';
+
 type Props = {
-	role: RoleType;
+	role: PictureRoleType;
 	format: ArticleFormat;
 	master: string;
 	alt: string;
@@ -54,7 +59,7 @@ const decideImageWidths = ({
 	isLightbox,
 	orientation,
 }: {
-	role: RoleType;
+	role: PictureRoleType;
 	isMainMedia?: boolean;
 	format: ArticleFormat;
 	isLightbox: boolean;
@@ -163,6 +168,11 @@ const decideImageWidths = ({
 			case 'supporting':
 			case 'halfWidth':
 				return [{ breakpoint: breakpoints.mobile, width: 445 }];
+			case 'podcastCover':
+				return [
+					{ breakpoint: breakpoints.mobile, width: 140 },
+					{ breakpoint: breakpoints.wide, width: 219 },
+				];
 			case 'inline':
 			default:
 				return [