CLP Editors Instructed To Use 2:1 Hero Image Aspect Ratio; Published Page Displays Different Ratio

[stefaniefgray]

Originally reported in https://va-gov.atlassian.net/browse/VAHELP-4520

Describe the defect

As the Communications Specialist for VA Health Connect, I would like to add a hero image to the Campaign Landing Page that I am working on.

URLs:

• Staging preview
• CMS page

The Hero Image upload field says to select an image with a 2:1 aspect ratio, so that is exactly what I have done:

@davidmpickett has verified using Adobe Photoshop that the image from this example uses a 2:1 aspect ratio

However, when the page is published and viewed within a desktop browser, the VA Health Connect logo is cut off, and the woman is missing the top of her head:

The image is only displayed as intended, with the VA Health Connect logo visible, when the browser is shrunk down to precisely mobile/tablet size. (Going narrower starts to crop the right side of the text.):

Questions:

• Do we need to fix how the image itself scales, or how it is displayed on the front end in accordance with the elements framing it?
• Is 2:1 the ratio that Public Websites wants?
• Should the Editors adding Campaign Landing Page content be uploading hero images with a different ratio altogether?

Wes notes:

• The chosen image is a poor choice since it has text inside a logo. Text should never be present in an image (right? a11y), and the logo is causing the crop to be very obvious.
• The range of aspect ratios that these images are meant to serve is unreasonably large, imho. At a wide-desktop view the ratio is extremely wide more like 3:1. At tablet size just above mobile breakpoint, the visible (right side) of the image is taller than it is wide (8:10 in this case, depends on text wrapping).
• The requirement that the photo have a large area that can be covered with text without looking weird is potentially a high barrier for Editors (speculating here).
• Laura points out in this ticket that the cropping in the CMS "View" screen is actually 7:2, which could confuse editors further.

Note: From the Helpdesk/Design discussion on 8/4/2022, it may be displayed at a 2:1 ratio on mobile and 3:1 on desktop

To Reproduce

Steps to reproduce the behavior:

1. Create a Campaign Landing Page
2. Attempt to add the following 2:1 ratio image as the "hero image" for the page, and click "Preview":

AC / Expected behavior

I expect to see the 2:1 aspect ratio hero image added to the Campaign Landing Page as intended, without the VA Health Connect logo being cut off or covered up.

Screenshots

See above

Additional context

Issue was discussed during 8/4/2022 Helpdesk/Design check-in meeting with @suzanne-gray @cjterdi @davidmpickett @TroyA6 and @stefaniefgray

Issue originated in https://va-gov.atlassian.net/browse/VAHELP-4520

Desktop (please complete the following information if relevant, or delete)

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Labels

(You can delete this section once it's complete)

• Issue type (red) (defaults to "Defect")
• CMS subsystem (green)
• CMS practice area (blue)
• CMS workstream (orange) (not needed for bug tickets)
• CMS-supported product (black)

CMS Team

Please check the team(s) that will do this work.

• Program
• Platform CMS Team
• Sitewide Crew
• ⭐️ Sitewide CMS
• ⭐️ Public Websites
• ⭐️ Facilities
• ⭐️ User support

[davidconlon]

@wesrowe do you know why this is "blocked" since April 2022?

[wesrowe]

I don't think I've seen this before. It appears that the CMS team handled this internally (with DaveP?) and it never came PW's way. Seems like I should move it into PW's refinement flow. We need to investigate how it lays out at non-desk breakpoints.

NEXT: probably Design discovery

[wesrowe]

UX refinement: Jordan to poke around a little to see what seems to really be going on here across device sizes. She'll return the ticket to the refinement flow at that point, probably for FE engineers to review.

[wesrowe]

@thejordanwood found the CLP page in the ticket. (will add)

@chri5tia to quickly pre-refine: is there a Drupal module/functionality available to enable Editors to pick a focal point that would prioritize an area of the photo when responsive cropping happens.

This will still be a difficult photo-selection challenge for Editors, as so much of the photo is covered by the text block. I'll make a note to discuss with DaveC when he returns.

[wesrowe]

BE refinement:

• Because we're headless, both BE and FE have to be configured per-product to handle responsive images: both saving multiple formats and having the FE request different formats

Aspect ratios:

• a contrib module could (almost certainly) provide ability to manage different aspect ratios (Editor uploads separately)
• FE would then place the different versions

Drupal core – "derivatives" of images

• can automate creation of different aspect ratios or resolutions, but it won't show them to Editors
• let's not use it

Next steps (Wes):

• detail high-level options for approach, with estimates if possible
• discuss with DaveC

[wesrowe]

It's my opinion that the Editor chose an image that 1) looks especially bad when the aspect ratio changes due to logo and text, and 2) should not be allowed based on that text/logo. Way forward would be to require the Editor to provide the photo without text or logo.

[jilladams]

@wesrowe in that case, could go ahead and provide feedback notes to Helpdesk and ask them to reach out to the editor for this change, esp since this originated from HD and they likely have an open JIRA ticket already.

[wesrowe]

@stefaniefgray, See my comment above, I think the Editor should choose another photograph. There are some unwritten norms about how photos get used on responsive websites that we could maybe write down somewhere to make this kind of issue less likely. Thoughts? Prefer to chat live?

[jilladams]

For reference: #12375

Actual state:
The FE is not using any crop ratio, which I believe is because this is a background image. We should remove the reference to the 2:1 aspect ratio from the Help text
Also, the View node actual does display an aspect ratio, it uses the 7:2 ratio. I'm not sure if there is anything we can do about the discrepancy between the View node and the actual FE display because this is headless but it is just something to note.

Team discussed, this is a CMS UX thing we should fix, but will not happen in this ticket.

[wesrowe]

Refinement:

• Be clear to Editors what they should do in the Drupal UI: manage their expectations, teach them how to Drupal
• i.e., look at all the aspect ratios in Drupal UI
• are aspect ratios "sticking" or is there a bug? Dave think probably it's the FE product not consuming the right image aspect ratios at the right break points
• the problem here is we're using image as background, which changes aspect ratio very fluidly
• "focal point functionality" was tried and removed a while back (Lynn Stahl); @laflannery can talk to Nate about possibility. Jordan is thinking: this would enable the FE to keep the focal point.

Steps forward:

• consider quick CSS change to prevent over-stretching
• spike with Design and Dev to identify low-effort fix to CSS that would
  • look good non-stretched
  • audit CLPs to make sure the change wouldn't mess up published CLPs
  • determine if pulling a non-original aspect ratio from drupal might help
  • review analytics for device/resolution info on visitors to CLPs

Update: Spike written: #15147

[jilladams]

This issue will be resolved by:

• BE: Update CLP help text and help image for 1:1 aspect ratio #15635
• FE: Implement CLP image aspect ratio fix #15632

@stefaniefgray - closing this as a dupe of those.