Move PictureLayout to grid by frederickobrien · Pull Request #16251 · guardian/dotcom-rendering

frederickobrien · 2026-06-23T18:21:36Z

Continuing on my grid rampage of #1542, #16119, and #16133 this absorbs PictureLayout into the new grid system for content pages. This one's a smidge more involved due to the avatar pics that sometimes render (though cracking that here paves the way for CommentLayout to move over too).

Screenshots

Before	After

github-actions · 2026-06-23T18:28:34Z

Deploy build 28889 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-06-24T13:03:36Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

github-actions · 2026-06-30T09:52:55Z

Deploy build 2084 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

JamieB-gu

Overall approach looks good. Comments mostly about application of CSS and the grid rules.

JamieB-gu · 2026-07-07T14:23:09Z

+	headline: {
+		mobile: 'grid-row: 2;',
+		tablet: 'grid-row: 2;',
+		desktop: `grid-row: 2; ${grid.between('centre-column-start', 'right-column-end')};`,


I think you're asking this element to span both columns here, then on the element inside it you're setting a max-width to ensure it's essentially the same width as the centre column? Would it be easier to just set grid.column.centre here (which I think is the default) and remove that max-width, or am I missing something about the design?

JamieB-gu · 2026-07-07T14:27:06Z

+	body: {
+		tablet: 'grid-row: 6;',
+		desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`,
+		leftCol: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,


Do you need the second grid.between here? Once it's set at desktop doesn't that continue to apply at leftCol?

Suggested change

leftCol: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,

leftCol: `grid-row: 5;`,

JamieB-gu · 2026-07-07T14:28:08Z

+		mobile: 'grid-row: 5;',
+		tablet: 'grid-row: 5;',
+		desktop: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,
+		leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`,


Do you need the second grid.between here? Once it's set at desktop doesn't that continue to apply at leftCol?

Suggested change

leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`,

leftCol: `grid-row: 3;`,

JamieB-gu · 2026-07-07T14:33:22Z

I've made some comments about how you probably don't need to repeat certain rules at later breakpoints because earlier ones still apply. But you're doing this a lot here so I'm wondering if there's a reason that I'm missing? If so, please ignore most of those comments!

JamieB-gu · 2026-07-07T14:34:01Z

+		mobile: 'grid-row: 1;',
+		tablet: 'grid-row: 1;',
+		leftCol: `grid-row: 1; ${grid.column.left}`,


I think the tablet rule still applies at leftCol?

Suggested change

mobile: 'grid-row: 1;',

tablet: 'grid-row: 1;',

leftCol: `grid-row: 1; ${grid.column.left}`,

mobile: 'grid-row: 1;',

tablet: 'grid-row: 1;',

leftCol: grid.column.left,

JamieB-gu · 2026-07-07T14:34:37Z

+		tablet: 'grid-row: 2;',
+		desktop: `grid-row: 2; ${grid.between('centre-column-start', 'right-column-end')};`,


I think the tablet rule still applies at desktop?

Suggested change

tablet: 'grid-row: 2;',

desktop: `grid-row: 2; ${grid.between('centre-column-start', 'right-column-end')};`,

tablet: 'grid-row: 2;',

desktop: grid.between('centre-column-start', 'right-column-end'),

JamieB-gu · 2026-07-07T14:35:03Z

+		tablet: 'grid-row: 4;',
+		desktop: 'grid-row: 4;',


I think the tablet rule still applies at desktop?

Suggested change

tablet: 'grid-row: 4;',

desktop: 'grid-row: 4;',

tablet: 'grid-row: 4;',

JamieB-gu · 2026-07-07T14:35:29Z

+		tablet: 'grid-row: 5;',
+		desktop: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,


I think the tablet rule still applies at desktop?

Suggested change

tablet: 'grid-row: 5;',

desktop: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,

tablet: 'grid-row: 5;',

desktop: grid.between('centre-column-start', 'right-column-end'),

JamieB-gu · 2026-07-07T14:36:29Z

+		tablet: 'grid-row: 3;',
+		desktop: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`,


I think the tablet rule still applies at desktop?

Suggested change

tablet: 'grid-row: 3;',

desktop: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`,

tablet: 'grid-row: 3;',

desktop: grid.between('centre-column-start', 'right-column-end'),

JamieB-gu · 2026-07-07T14:36:54Z

+		tablet: 'grid-row: 6;',
+		desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`,


I think the tablet rule still applies at desktop?

Suggested change

tablet: 'grid-row: 6;',

desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`,

tablet: 'grid-row: 6;',

desktop: grid.between('centre-column-start', 'right-column-end'),

akash1810 · 2026-07-09T13:35:39Z

Please rebase this branch against main before deploying to CODE. #16321 made some changes to CI and infrastructure. Deploying this branch without these changes present will either:

Fail when using Riff-Raff's default update strategy
OR delete the new infrastructure if using Riff-Raff's "dangerous" mode

Please rebase this branch against main before deploying to CODE.

frederickobrien self-assigned this Jun 23, 2026

frederickobrien added the maintenance Departmental tracking: maintenance work, not a fix or a feature label Jun 23, 2026

frederickobrien added this to the Interactives milestone Jun 23, 2026

frederickobrien changed the title ~~Absorb PictureLayout into grid~~ Move PictureLayout to grid Jun 24, 2026

frederickobrien added the run_chromatic Runs chromatic when label is applied label Jun 24, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 24, 2026

frederickobrien marked this pull request as ready for review June 24, 2026 13:03

frederickobrien force-pushed the move-picture-layout-into-grid branch from f33830a to e33629d Compare June 24, 2026 13:03

frederickobrien requested a review from a team June 24, 2026 13:03

frederickobrien added the run_chromatic Runs chromatic when label is applied label Jun 24, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 24, 2026

frederickobrien mentioned this pull request Jun 28, 2026

Use grid module for StandardLayout #15428

Merged

frederickobrien force-pushed the move-picture-layout-into-grid branch 2 times, most recently from e2f5162 to d9fba56 Compare June 30, 2026 09:50

frederickobrien added the run_chromatic Runs chromatic when label is applied label Jun 30, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Jun 30, 2026

frederickobrien mentioned this pull request Jun 30, 2026

Move standard article grid into its own component #16300

Merged

frederickobrien force-pushed the move-picture-layout-into-grid branch 2 times, most recently from 6729bd2 to 53aad3f Compare July 3, 2026 09:14

JamieB-gu reviewed Jul 7, 2026

View reviewed changes

frederickobrien force-pushed the move-picture-layout-into-grid branch from 53aad3f to 9877fdf Compare July 7, 2026 15:48

frederickobrien added 2 commits July 9, 2026 14:25

Absorb PictureLayout into grid

5d75226

Handle author/artist avatars

ebfdf4a

frederickobrien force-pushed the move-picture-layout-into-grid branch from 9877fdf to ebfdf4a Compare July 9, 2026 13:25

	leftCol: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,
	leftCol: `grid-row: 5;`,

	leftCol: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`,
	leftCol: `grid-row: 3;`,

		tablet: 'grid-row: 2;',
		desktop: `grid-row: 2; ${grid.between('centre-column-start', 'right-column-end')};`,

	tablet: 'grid-row: 4;',
	desktop: 'grid-row: 4;',
	tablet: 'grid-row: 4;',

		tablet: 'grid-row: 5;',
		desktop: `grid-row: 5; ${grid.between('centre-column-start', 'right-column-end')};`,

		tablet: 'grid-row: 3;',
		desktop: `grid-row: 3; ${grid.between('centre-column-start', 'right-column-end')};`,

		tablet: 'grid-row: 6;',
		desktop: `grid-row: 6; ${grid.between('centre-column-start', 'right-column-end')};`,

Uh oh!

Conversation

frederickobrien commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Uh oh!

github-actions Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 24, 2026

Uh oh!

github-actions Bot commented Jun 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JamieB-gu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akash1810 commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

frederickobrien commented Jun 23, 2026 •

edited

Loading

github-actions Bot commented Jun 23, 2026 •

edited

Loading

github-actions Bot commented Jun 30, 2026 •

edited

Loading

akash1810 commented Jul 9, 2026 •

edited

Loading