search

guardian / grid

The Guardian’s image management system
https://www.theguardian.com/info/developer-blog/2015/aug/12/open-sourcing-grid-image-service
Apache License 2.0
1.44k stars 121 forks source link

[GNM only] add gutters to 5:3 cropping box, to show what will be clipped if used in a 5:4 space (with explainer) - BEHIND FEATURE SWITCH FOR NOW #4331

Closed twrichards closed 2 months ago

twrichards commented 2 months ago

In some cases 5:3 crops need to be used in 5:4 spaces, and currently the sides are clipped off by platforms, sometimes undesirably.

What does this change?

This PR aims to reduce the likelihood that images displayed this way will need recropping, by presenting striped gutters on the left/right for landscape 5:3 crops. With explainer to suggest, not having anything important in the striped gutters when cropping 5:3 in anticipation of it being used in 5:4 space.

This is implemented using ::before and ::after CSS pseudo elements as this seemed the most pragmatic rather than attempting to do 'officially' via jcrop (might have needed a major upgrade to accomplish) and the CSS selectors used seem sufficiently stable/simple.

## Images ### 5:3 ![image](https://github.com/user-attachments/assets/bcfeef30-20a6-4f7b-9187-57870465dec5) ### other ratios (e.g. 1:1 square crop) note how there are no striped gutters / explainer ![image](https://github.com/user-attachments/assets/5cd5a27b-9e5e-41dc-8fc3-2289677e50ba) ### feature switch to enable Using the lovely feature switch panel added in #3964 - Ctrl + Shift + F12 to activate the feature switch panel... ![image](https://github.com/user-attachments/assets/27493646-3ae9-4795-ba0c-4f1b0dd8f288)

How can success be measured?

We mitigate the need for more major efforts to support the 5:4 use case.

Tested? Documented?

github-actions[bot] commented 2 months ago

Deploy build 12768 to TEST

All deployment options - [Deploy build 12768 to TEST](https://riffraff.gutools.co.uk/deployment/deployAgain?project=media-service%3A%3Agrid%3A%3Aall&build=12768&stage=TEST&updateStrategy=MostlyHarmless&action=deploy) - [Deploy parts of build 12768 to TEST by previewing it first](https://riffraff.gutools.co.uk/preview/yaml?project=media-service%3A%3Agrid%3A%3Aall&build=12768&stage=TEST&updateStrategy=MostlyHarmless)

From guardian/actions-riff-raff.

prout-bot commented 2 months ago

Seen on kahuna (merged by @twrichards 7 minutes and 30 seconds ago) Please check your changes!

prout-bot commented 2 months ago

Seen on auth, image-loader, thrall, media-api (merged by @twrichards 7 minutes and 35 seconds ago) Please check your changes!

prout-bot commented 2 months ago

Seen on collections, cropper (merged by @twrichards 7 minutes and 38 seconds ago) Please check your changes!

prout-bot commented 2 months ago

Seen on leases (merged by @twrichards 7 minutes and 42 seconds ago) Please check your changes!

prout-bot commented 2 months ago

Seen on metadata-editor (merged by @twrichards 7 minutes and 49 seconds ago) Please check your changes!

prout-bot commented 2 months ago

Seen on usage (merged by @twrichards 7 minutes and 56 seconds ago) Please check your changes!