Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fairground] Display image as 4:5 in relevant collections #1743

Merged
merged 6 commits into from
Dec 17, 2024

Conversation

Georges-GNM
Copy link
Contributor

@Georges-GNM Georges-GNM commented Dec 11, 2024

What's changed?

Part of this ticket. Displays trail and thumbnail images with a 4:5 aspect ratio for relevant collections.

Implementation note

This was made using the same pattern previously implemented for square/landscape54 images being displayed. We're at the point of having the same logic effectively being repeated three times, so it's an opportunity for a refactor, which I've started putting together, but thought that change was best left for a separate PR.

Screenshots

These examples contrast a scrollable feature collection, which uses 4:5 images, and a scrollable small, which uses landscape 5:4. The image getting displayed is the one automatically selected when adding the story to the collection (so no manual replacing/cropping of the image).

Thumbnail:

image

Trail image:

image

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

@Georges-GNM Georges-GNM self-assigned this Dec 11, 2024
@Georges-GNM Georges-GNM changed the title Display portrait images [Fairground] Display image as 4:5 in relevant collections Dec 11, 2024
@Georges-GNM Georges-GNM marked this pull request as ready for review December 11, 2024 16:10
@Georges-GNM Georges-GNM requested a review from a team as a code owner December 11, 2024 16:10
Copy link
Contributor

@abeddow91 abeddow91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, nice work!

Requires the fronts tool portrait feature switch to be activated in order to see this change.

@@ -52,20 +52,20 @@ const squareStyle = `
`;

const getVariableImageContainerStyle = ({
portrait = false,
shouldShowPortrait = false,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

much clearer 👍

@Georges-GNM Georges-GNM merged commit 19913d3 into main Dec 17, 2024
13 checks passed
@Georges-GNM Georges-GNM deleted the gl/4-5-trail branch December 17, 2024 14:13
@prout-bot
Copy link

Seen on PROD (merged by @Georges-GNM 8 minutes and 37 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants