add recrop button for trail images

[twrichards]

Related guardian/grid#4331

There appeared to be glaring omission in the functionality around 'overriding trail images' since the existing button only let you 'replace image' (taking you to grid homepage/search in the modal), unlike say composer's 'recrop button' on image elements which at least takes you to the picture that's already selected, meaning that to tweak the crop used for a trail image, the same image would need to be re-found amongst the millions in the grid.

What's changed?

In this PR we add a new 'Recrop image' button alongside the 'Replace image' button to provide the missing functionality...

Before	After

... this takes the user to that specific image in crop mode (ready to create a new crop). Thanks to @waisingyiu's #1601 if the container uses 5:4 trails then the crop options will be limited to 5:4 (otherwise restricted to 5:3 when overriding trail images).

It now also passes a seedCropId, in anticipation of grid using it (guardian/grid#4332) for the starting position/dimensions of the new crop (particularly useful when re-cropping a 5:3 into a 5:4).

Although, prompted by the 5:4 trail images situation, this feature is useful in its own right.

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 8435 of cms-fronts::facia-tool to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[paperboyo]

Yay, thank you!

if the container uses 5:4 trails then the crop options will be limited to 5:4 (otherwise restricted to 5:3 when overriding trail images)

And if container uses 4:5, it restricts to 4:5, right? (sorry for being pedantic!)

[twrichards]

Yay, thank you!

if the container uses 5:4 trails then the crop options will be limited to 5:4 (otherwise restricted to 5:3 when overriding trail images)

And if container uses 4:5, it restricts to 4:5, right? (sorry for being pedantic!)

It should yes. My comment was more an example that it preserves whatever logic was there already.

[dblatcher]

LGMT!
Not one for this PR, but it might be worth adding a recrop button for replacement images as well as on the original trail image.

[twrichards]

Thanks for the review @dblatcher

Not one for this PR, but it might be worth adding a recrop button for replacement images as well as on the original trail image.

Yeah good thought, I did consider that myself at the time but didn't want to change the UX too much - so as you say for a future PR perhaps (also let's see if any users request that once they've had this PR's functionality for a little while)

[prout-bot]

Seen on PROD (merged by @twrichards 6 minutes and 26 seconds ago) Please check your changes!