Skip to content

Extend podcast image size in Flexible General half-width slot #14753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 29, 2025
+93 −93
Merged

Extend podcast image size in Flexible General half-width slot #14753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
909df92
Don't fix podcast image width when card is horizontal
domlander Oct 28, 2025
0c7d621
Refactor Podcast image styling
domlander Oct 29, 2025
41d4225
Tablet podcast image should be 120px
domlander Oct 29, 2025
0c3dc4f
Added comment. Put the flexBasis logic in MediaWrapper together
domlander Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 40 additions & 56 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,6 @@ import { CardWrapper } from './components/CardWrapper';
import { ContentWrapper } from './components/ContentWrapper';
import { HeadlineWrapper } from './components/HeadlineWrapper';
import type {
MediaFixedSizeOptions,
MediaPositionType,
MediaSizeType,
} from './components/MediaWrapper';
Expand Down Expand Up @@ -157,7 +156,6 @@ export type Props = {
trailTextSize?: TrailTextSize;
/** A kicker image is seperate to the main media and renders as part of the kicker */
showKickerImage?: boolean;
fixImageWidth?: boolean;
/** Determines if the headline should be positioned within the content or outside the content */
headlinePosition?: 'inner' | 'outer';
/** Feature flag for the labs redesign work */
Expand Down Expand Up @@ -227,33 +225,37 @@ const HorizontalDivider = () => (
/>
);

const podcastImageStyles = (imageSize: MediaSizeType) => {
switch (imageSize) {
case 'scrollable-small':
return css`
width: 69px;
height: 69px;
${from.tablet} {
width: 98px;
height: 98px;
}
`;

case 'scrollable-medium':
return css`
const podcastImageStyles = (
isSmallCard: boolean,
imagePositionOnDesktop: MediaPositionType,
) => {
if (isSmallCard) {
return css`
width: 69px;
height: 69px;
${from.tablet} {
width: 98px;
height: 98px;
${from.tablet} {
width: 120px;
height: 120px;
}
`;
default:
return css`
width: 120px;
height: 120px;
`;
}
`;
}

const isHorizontalOnDesktop =
imagePositionOnDesktop === 'left' || imagePositionOnDesktop === 'right';

return css`
width: 98px;
height: 98px;
${from.tablet} {
width: 120px;
height: 120px;
}
/** The image takes the full height on desktop, so that the waveform sticks to the bottom of the card. */
${from.desktop} {
width: ${isHorizontalOnDesktop ? 'unset' : '120px'};
height: ${isHorizontalOnDesktop ? 'unset' : '120px'};
}
`;
};

const getMedia = ({
Expand Down Expand Up @@ -399,7 +401,6 @@ export const Card = ({
showTopBarMobile = true,
trailTextSize,
showKickerImage = false,
fixImageWidth,
headlinePosition = 'inner',
showLabsRedesign = false,
}: Props) => {
Expand Down Expand Up @@ -586,27 +587,7 @@ export const Card = ({
containerType === 'flexible/special' ||
containerType === 'flexible/general';

const isSmallCard =
containerType === 'scrollable/small' ||
containerType === 'scrollable/medium';

const mediaFixedSizeOptions = (): MediaFixedSizeOptions => {
if (isSmallCard) {
return {
mobile: 'tiny',
tablet: 'small',
desktop: 'small',
};
}

if (isFlexibleContainer) {
return {
mobile: 'small',
};
}

return { mobile: 'medium' };
};
const isSmallCard = containerType === 'scrollable/small';

const hideTrailTextUntil = () => {
if (isFlexibleContainer) {
Expand Down Expand Up @@ -660,7 +641,10 @@ export const Card = ({
return { row: 'small', column: 'small' };
}

if (isSmallCard) {
if (
containerType === 'scrollable/small' ||
containerType === 'scrollable/medium'
) {
return {
row: 'medium',
column: 'medium',
Expand Down Expand Up @@ -902,18 +886,13 @@ export const Card = ({
{media && (
<MediaWrapper
mediaSize={mediaSize}
mediaFixedSizes={mediaFixedSizeOptions()}
mediaType={media.type}
mediaPositionOnDesktop={mediaPositionOnDesktop}
mediaPositionOnMobile={mediaPositionOnMobile}
fixImageWidth={
fixImageWidth ??
(mediaPositionOnMobile === 'left' ||
mediaPositionOnMobile === 'right')
}
hideImageOverlay={media.type === 'slideshow'}
padMedia={isMediaCardOrNewsletter && isBetaContainer}
isBetaContainer={isBetaContainer}
isSmallCard={isSmallCard}
>
{media.type === 'slideshow' && (
<div
Expand Down Expand Up @@ -1119,7 +1098,12 @@ export const Card = ({
{media.type === 'podcast' && (
<>
{media.podcastImage?.src && !showKickerImage ? (
<div css={podcastImageStyles(mediaSize)}>
<div
css={podcastImageStyles(
isSmallCard,
mediaPositionOnDesktop,
)}
>
<CardPicture
mainImage={media.podcastImage.src}
imageSize="small"
Expand Down
90 changes: 53 additions & 37 deletions dotcom-rendering/src/components/Card/components/MediaWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,6 @@ const mediaFixedSize = {
medium: 125,
};

type MediaFixedSize = keyof typeof mediaFixedSize;

export type MediaFixedSizeOptions = {
mobile?: MediaFixedSize;
tablet?: MediaFixedSize;
desktop?: MediaFixedSize;
};

export type MediaPositionType = 'left' | 'top' | 'right' | 'bottom' | 'none';
export type MediaSizeType =
| 'small'
Expand All @@ -36,18 +28,17 @@ export type MediaSizeType =
type Props = {
children: React.ReactNode;
mediaSize: MediaSizeType;
mediaFixedSizes?: MediaFixedSizeOptions;
mediaType?: CardMediaType;
mediaPositionOnDesktop: MediaPositionType;
mediaPositionOnMobile: MediaPositionType;
fixImageWidth: boolean;
/**
* Forces hiding the image overlay added to pictures & slideshows on hover.
* This is to allow hiding the overlay on slideshow carousels where we don't
* want it to be shown whilst retaining it for existing slideshows.
*/
hideImageOverlay?: boolean;
isBetaContainer?: boolean;
isBetaContainer: boolean;
isSmallCard: boolean;
padMedia?: boolean;
};

Expand Down Expand Up @@ -86,9 +77,13 @@ const mediaPaddingStyles = (
*/
const flexBasisStyles = ({
mediaSize,
mediaType,
isSmallCard,
isBetaContainer,
}: {
mediaSize: MediaSizeType;
mediaType: CardMediaType;
isSmallCard: boolean;
isBetaContainer: boolean;
}): SerializedStyles => {
if (!isBetaContainer) {
Expand Down Expand Up @@ -119,6 +114,15 @@ const flexBasisStyles = ({
}
}

if (mediaType === 'podcast' && !isSmallCard) {
return css`
flex-basis: 120px;
${from.desktop} {
flex-basis: 168px;
}
`;
}

switch (mediaSize) {
default:
case 'small':
Expand Down Expand Up @@ -150,6 +154,7 @@ const flexBasisStyles = ({
`;
}
};

/**
* Below tablet, we fix the size of the media and add a margin around it.
* The corresponding content flex grows to fill the space.
Expand All @@ -163,43 +168,48 @@ const fixMediaWidthStyles = (width: number) => css`
align-self: flex-start;
`;

const fixMediaWidth = ({
mobile,
tablet,
desktop,
}: MediaFixedSizeOptions) => css`
${mobile &&
css`
const fixMobileMediaWidth = (
isBetaContainer: boolean,
isSmallCard: boolean,
) => {
if (!isBetaContainer) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, this will make it easier to rip out once we fully discontinue old containers

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was my thinking. It should be easy to delete this old code once the time comes.

return css`
${until.tablet} {
${fixMediaWidthStyles(mediaFixedSize.medium)}
}
`;
}

const size = isSmallCard ? mediaFixedSize.tiny : mediaFixedSize.small;

return css`
${until.tablet} {
${fixMediaWidthStyles(mediaFixedSize[mobile])}
${fixMediaWidthStyles(size)}
}
`}
${tablet &&
css`
${between.tablet.and.desktop} {
${fixMediaWidthStyles(mediaFixedSize[tablet])}
Comment on lines -179 to -180
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we no longer account for a size change between tablet and desktop. Is this intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, we didn't make a distinction here: https://github.com/guardian/dotcom-rendering/pull/14753/files#diff-fbf8297916d3e244f5c5288b6fe289a3ac99c9a22d6211ee0d741c6c0c27da8bL593. I've also tested that tablet looks correct.

}
`}
${desktop &&
css`
${from.desktop} {
${fixMediaWidthStyles(mediaFixedSize[desktop])}
`;
};

const fixDesktopMediaWidth = () => {
return css`
${from.tablet} {
${fixMediaWidthStyles(mediaFixedSize.small)}
}
`}
`;
`;
};

export const MediaWrapper = ({
children,
mediaSize,
mediaFixedSizes = { mobile: 'medium' },
mediaType,
mediaPositionOnDesktop,
mediaPositionOnMobile,
fixImageWidth,
hideImageOverlay,
isBetaContainer = false,
isBetaContainer,
isSmallCard,
padMedia,
}: Props) => {
const isHorizontalOnMobile =
mediaPositionOnMobile === 'left' || mediaPositionOnMobile === 'right';
const isHorizontalOnDesktop =
mediaPositionOnDesktop === 'left' || mediaPositionOnDesktop === 'right';

Expand All @@ -209,10 +219,13 @@ export const MediaWrapper = ({
(mediaType === 'slideshow' ||
mediaType === 'picture' ||
mediaType === 'youtube-video' ||
mediaType === 'loop-video') &&
mediaType === 'loop-video' ||
mediaType === 'podcast') &&
isHorizontalOnDesktop &&
flexBasisStyles({
mediaSize,
mediaType,
isSmallCard,
isBetaContainer,
}),
mediaType === 'avatar' &&
Expand All @@ -227,7 +240,10 @@ export const MediaWrapper = ({
display: none;
}
`,
fixImageWidth && fixMediaWidth(mediaFixedSizes),
isHorizontalOnMobile &&
mediaType !== 'podcast' &&
fixMobileMediaWidth(isBetaContainer, isSmallCard),
isSmallCard && fixDesktopMediaWidth(),
isHorizontalOnDesktop &&
css`
${from.tablet} {
Expand Down
Loading