Add support for podcast image i n Picture.tsx

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 [

dotcom-rendering/src/layouts/StandardLayout.tsx

@@ -40,6 +40,7 @@ import { MostViewedFooterData } from '../components/MostViewedFooterData.importa
 import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout';
 import { MostViewedRightWithAd } from '../components/MostViewedRightWithAd.importable';
 import { OnwardsUpper } from '../components/OnwardsUpper.importable';
+import { Picture } from '../components/Picture';
 import { RightColumn } from '../components/RightColumn';
 import { Section } from '../components/Section';
 import { SlotBodyEnd } from '../components/SlotBodyEnd.importable';
@@ -120,7 +121,7 @@ const StandardGrid = ({
 						? css`
 								grid-template-areas:
 									'title  border  headline   headline   .'
-									'.      border  disclaimer disclaimer right-column'
+									'image  border  disclaimer disclaimer right-column'
 									'meta   border  media      media      right-column'
 									'meta   border  standfirst standfirst right-column'
 									'.      border  body       body       right-column'
@@ -163,7 +164,7 @@ const StandardGrid = ({
 					? css`
 							grid-template-areas:
 								'title  border  headline     .'
-								'.      border  disclaimer   right-column'
+								'image  border  disclaimer   right-column'
 								'meta   border  media        right-column'
 								'meta   border  standfirst   right-column'
 								'meta   border  body         right-column'
@@ -209,6 +210,7 @@ const StandardGrid = ({
 								'disclaimer    right-column'
 								'media         right-column'
 								'standfirst    right-column'
+								'image         right-column'
 								'meta          right-column'
 								'body          right-column'
 								'.             right-column';
@@ -248,6 +250,7 @@ const StandardGrid = ({
 								'disclaimer'
 								'media'
 								'standfirst'
+								'image'
 								'meta'
 								'body';
 					  `
@@ -287,6 +290,7 @@ const StandardGrid = ({
 								'disclaimer'
 								'media'
 								'standfirst'
+								'image'
 								'meta'
 								'body';
 					  `
@@ -344,6 +348,20 @@ const stretchLines = css`
 	}
 `;
 
+const podcastResponsiveCoverImage = css`
+	img {
+		width: 140px;
+		height: 140px;
+	}
+	margin: 0.375rem 0 0.375rem 0;
+	${from.wide} {
+		img {
+			width: 219px;
+			height: 219px;
+		}
+	}
+`;
+
 const starWrapper = css`
 	background-color: ${themePalette('--star-rating-background')};
 	color: ${themePalette('--star-rating-fill')};
@@ -417,6 +435,8 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 
 	const renderAds = isWeb && canRenderAds(article);
 
+	const podcastSeries = article.tags.find((tag) => tag.type === 'Series');
+
 	return (
 		<>
 			{isWeb && (
@@ -736,6 +756,25 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 								</>
 							)}
 						</GridItem>
+						{format.design === ArticleDesign.Audio &&
+							podcastSeries && (
+								<GridItem area="image" element="aside">
+									<div css={podcastResponsiveCoverImage}>
+										<Picture
+											role={'podcastCover'}
+											format={format}
+											master={
+												podcastSeries.podcast?.image ??
+												''
+											}
+											alt={podcastSeries.title}
+											height={1}
+											width={1}
+											loading="lazy"
+										/>
+									</div>
+								</GridItem>
+							)}
 						<GridItem area="body">
 							{isWeb && (
 								<Hide from="leftCol">