From cac36f6fa44288e37f108e5fae21186daf9ff209 Mon Sep 17 00:00:00 2001 From: Charlotte Date: Thu, 26 Mar 2026 15:27:54 +0000 Subject: [PATCH 1/3] allow hosted pages to display wide, high resolution main media images --- dotcom-rendering/src/components/Picture.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index 17e4c82d710..9c43a6aab01 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -140,7 +140,10 @@ const decideImageWidths = ({ if (isMainMedia) { if ( format.display === ArticleDisplay.Immersive || - format.design === ArticleDesign.Gallery + format.design === ArticleDesign.Gallery || + format.design === ArticleDesign.HostedArticle || + format.design === ArticleDesign.HostedVideo || + format.design === ArticleDesign.HostedGallery ) { // If display is Immersive then main media should *always* // use these larger image sources From 50fd5bb7d2ab148735359aa4e3b300dd4982c6b9 Mon Sep 17 00:00:00 2001 From: Charlotte Date: Thu, 26 Mar 2026 15:57:26 +0000 Subject: [PATCH 2/3] use separate image width definition for hosted content pages + include aspect ratio --- dotcom-rendering/src/components/Picture.tsx | 46 +++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index 9c43a6aab01..311e146e994 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -140,10 +140,7 @@ const decideImageWidths = ({ if (isMainMedia) { if ( format.display === ArticleDisplay.Immersive || - format.design === ArticleDesign.Gallery || - format.design === ArticleDesign.HostedArticle || - format.design === ArticleDesign.HostedVideo || - format.design === ArticleDesign.HostedGallery + format.design === ArticleDesign.Gallery ) { // If display is Immersive then main media should *always* // use these larger image sources @@ -169,6 +166,47 @@ const decideImageWidths = ({ { breakpoint: breakpoints.wide, width: 1900 }, ]; } + /** + * We allow larger images for Hosted Content pages due to + * the design of these being wider + */ + if ( + format.design === ArticleDesign.HostedArticle || + format.design === ArticleDesign.HostedVideo || + format.design === ArticleDesign.HostedGallery + ) { + return [ + { + breakpoint: breakpoints.mobile, + width: 660, + aspectRatio: '5:4', + }, + { + breakpoint: breakpoints.mobileLandscape, + width: 660, + aspectRatio: '5:3', + }, + { + breakpoint: breakpoints.phablet, + width: 740, + aspectRatio: '5:3', + }, + { + breakpoint: breakpoints.tablet, + width: 980, + aspectRatio: '5:3', + }, + { + breakpoint: breakpoints.desktop, + width: 1140, + }, + { + breakpoint: breakpoints.leftCol, + width: 1300, + }, + { breakpoint: breakpoints.wide, width: 1300 }, + ]; + } switch (format.display) { case ArticleDisplay.Showcase: case ArticleDisplay.NumberedList: { From d39405058a9d26aede40d3d0f607d94115c61a34 Mon Sep 17 00:00:00 2001 From: Charlotte Date: Thu, 26 Mar 2026 16:09:48 +0000 Subject: [PATCH 3/3] tweak image sizes slightly to find the balance between performance and image quality --- dotcom-rendering/src/components/Picture.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index 311e146e994..2cd4b5eb4c2 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -178,33 +178,33 @@ const decideImageWidths = ({ return [ { breakpoint: breakpoints.mobile, - width: 660, + width: breakpoints.mobileLandscape, aspectRatio: '5:4', }, { breakpoint: breakpoints.mobileLandscape, - width: 660, + width: breakpoints.phablet, aspectRatio: '5:3', }, { breakpoint: breakpoints.phablet, - width: 740, + width: breakpoints.tablet, aspectRatio: '5:3', }, { breakpoint: breakpoints.tablet, - width: 980, + width: breakpoints.desktop, aspectRatio: '5:3', }, { breakpoint: breakpoints.desktop, - width: 1140, + width: breakpoints.leftCol, }, { breakpoint: breakpoints.leftCol, - width: 1300, + width: breakpoints.wide, }, - { breakpoint: breakpoints.wide, width: 1300 }, + { breakpoint: breakpoints.wide, width: breakpoints.wide }, ]; } switch (format.display) {