Move PictureLayout to grid

[frederickobrien]

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]

Deploy build 30847 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 30847 of dotcom:rendering-all to CODE
• Deploy parts of build 30847 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

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]

Deploy build 3021 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 3021 of dotcom:ab-testing to CODE
• Deploy parts of build 3021 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[JamieB-gu]

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

[JamieB-gu]

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?

[frederickobrien]

It's my attempt to handle the existing appearance where the grid section as a whole spans all the way to the end of the right column, but the headline itself doesn't. E.g.

[akash1810]

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.

[Jakeii]

There appear to be some unintentional differences now:
This PR:

prod:

[frederickobrien]

This keeps parity with the Chromatic tests though I'd argue it's better for this to be consistent

[frederickobrien]

There appear to be some unintentional differences now: This PR:

prod:

I think I've addressed these as part of some rebasing and polishing. There are a handful of Chromatic changes now but I think they're preferable if that makes sense?

[Jakeii]

There appear to be some unintentional differences now: This PR:
prod:

I think I've addressed these as part of some rebasing and polishing. There are a handful of Chromatic changes now but I think they're preferable if that makes sense?

Could you add a story for the case I found perhaps? Also have you done any other manual testing? As clearly the stories aren't exhaustive!

[github-actions]

🚀 Image pushed to AWS ECR

Image digest: sha256:533ca6852fffa2d2d05210099edd470d711c92c04d5181ac2f74093dc2e5080f

🐛 Run the image locally

The following can be used to run the image locally:

# Refer to image using the immutable digest. Find alternatives below.
IMAGE_IDENTIFIER="@sha256:533ca6852fffa2d2d05210099edd470d711c92c04d5181ac2f74093dc2e5080f"

# Refer to image using branch tag
# IMAGE_IDENTIFIER=":branch-move-picture-layout-into-grid"

# Refer to image using build tag
# IMAGE_IDENTIFIER=":build-30847"

# Refer to image via the GitHub commit SHA tag
# IMAGE_IDENTIFIER=":sha-9a177ea782c29db4f141b5774e3d7262c11e3435"

# Set environment variables for the AWS CLI
AWS_PROFILE="<A_PROFILE_FROM_JANUS>"
AWS_DEFAULT_REGION="eu-west-1"

IMAGE_ACCOUNT_ID=$(aws ssm get-parameter --name /organisation/accounts/deployTools --query "Parameter.Value" --output text)
REGISTRY="${IMAGE_ACCOUNT_ID}.dkr.ecr.${AWS_DEFAULT_REGION}.amazonaws.com"
IMAGE="${REGISTRY}/guardian/dotcom-rendering${IMAGE_IDENTIFIER}"

# Login to AWS ECR https://docs.aws.amazon.com/AmazonECR/latest/userguide/registry_auth.html
aws ecr get-login-password | docker login --username AWS --password-stdin $REGISTRY

# Pull the image
docker pull $IMAGE

# Run the image. You'll likely need to set additional flags. See https://docs.docker.com/reference/cli/docker/container/run.
docker run $IMAGE

---

From guardian/actions-publish-image.