allow for collections using portrait trails

[dblatcher]

What's changed?

Currently, all trail images are required / expected to have a 5:3 (landscape) aspect ratio - as such this currently hardwired into parts of the InputImage component, such as the uri used to open the GridModal specifying the "imageType=landscape" query param (even though the criteria object specifying the expected dimensions is already a prop).

There are plans to allow 4:5 portraint trail images for some containers, so the component needed to be generalised to allow for images matching other criteria to be selected.

This PR doesn't make any user-facing changes, but refactors the InputImage component so it would work as expected if provided a criteria prop representing 4:5 portrait images.

Implementation notes

• InputImage needs extra state to track the dimension of its replacement image so it can style the image button in the right shape (using an <img> and relying in the native image dimensions instead of background-image css might have removed the need for this, but this seemed like a less fiddly option) - removed the extra state and replaced with a method to extract the values from props.input.value
• Crops selected from the Grid Modal are now validated against the criteria - in theory this shouldn't be necessary as the query params will have prevented invalid crops being selected,
• this PR doesn't address some potential pitfalls in allowing different aspect ratio for certain containers eg:
  • what happens if a card with a portrait trail is dragged to another container that doesn't support them?
  • what happens if a container with cards with portrait trail is moved and/or has its type changed?

Testing

As written, there should be no changes in behaviour compared to main.

To test the mechanism locally, edit the value of defaultCardTrailImageCriteria to portraitCardImageCriteria in fronts-client/src/constants/image.ts. With that change:

• when you click the trail image to select a replacement trail image from the grid, it should require portrait crops instead of landscape
• pasting a grid image url into the text input should select a portrait crop (if available)
• When a portrait crop is selected and the "Use replacement image" option is selected, the button will be styled with the appropriate shape.

Setting defaultCardTrailImageCriteria=undefined should allow you to select either 4:5 or 5:3 images.

Checklist

General

• 🤖 Relevant tests added
• ✅ CI checks / tests run locally
• 🔍 Checked on CODE

Client

• 🚫 No obvious console errors on the client (i.e. React dev mode errors)
• 🎛️ No regressions with existing user interactions (i.e. all existing buttons, inputs etc. work)
• 📷 Screenshots / GIFs of relevant UI changes included

[github-actions]

Deploy build 8099 of cms-fronts::facia-tool to CODE

All deployment options

• Deploy build 8099 of cms-fronts::facia-tool to CODE
• Deploy parts of build 8099 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[rebecca-thompson]

Works as expected 👍

[prout-bot]

Seen on PROD (merged by @dblatcher 16 minutes and 28 seconds ago) Please check your changes!