diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index c365f02e91..18e5a04d50 100644 --- 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' && ( )} + + {media.type === 'podcast' && ( + <> + {media.podcastImage.src ? ( +
+ +
+ ) : ( + + )} + + )} )} diff --git a/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx b/dotcom-rendering/src/components/Card/components/ImageWrapper.tsx index b575061c5f..7fac7e984f 100644 --- 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 (