Project

General

Profile

Actions

Feature #20376

closed

Feature #19592: Groups Page Re-Design

Improvements to group cover aspect ratio and/or height across views

Added by Boone Gorges about 1 month ago. Updated 14 days ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Groups (misc)
Target version:
Start date:
2024-05-21
Due date:
% Done:

0%

Estimated time:
Deployment actions:

Description

In the original comps for redesign groups, we see a number of different types of behavior for group cover images:

1. On the group home page, the cover image element is 360px tall and 100% width of the viewport
2. On other group pages, the cover image element is 250px tall and 100% width of the viewport

In both cases, the fixed height but variable width means that background-size: cover is used. In our case, this generally means that the cover image is stretched to the full width of the viewport, with a rectangle 360px or 250px high shown from the center of the cover image.

This behavior causes some inconsistencies, since the "crop" behavior is different on viewports of different widths. This can be difficult for the group admin to understand. It's made even more problematic by the fact that the Manage > Cover Image interface gives a preview of the results, but only at one of the 250px/360px heights.

There's a further problem with the approach, which is that background-size: cover forces the background image to be full-width, even if it means upsizing. This can result in a pixelated image.

Let's use this ticket to talk through some short-term and long-term strategies.


Files

repeat-x.png (2.12 MB) repeat-x.png Raymond Hoh, 2024-05-21 03:51 PM
07.webp (102 KB) 07.webp Raymond Hoh, 2024-06-05 08:24 AM
08.webp (60.2 KB) 08.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-01.webp (11.9 KB) Commons-01.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-02.webp (70.5 KB) Commons-02.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-09.webp (95.1 KB) Commons-09.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-10.webp (53.7 KB) Commons-10.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-12.webp (17.3 KB) Commons-12.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-13.webp (36.1 KB) Commons-13.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-14.webp (17.5 KB) Commons-14.webp Raymond Hoh, 2024-06-05 08:24 AM
Commons-16.webp (114 KB) Commons-16.webp Raymond Hoh, 2024-06-05 08:25 AM
Commons-17.webp (34.1 KB) Commons-17.webp Raymond Hoh, 2024-06-05 08:33 AM
Actions #1

Updated by Boone Gorges about 1 month ago

In today's dev call, we talked through one mitigation: using the same cover image height across all (desktop) group screens, rather than having a taller image on the home page. I've made the change to 300px in https://github.com/cuny-academic-commons/cac/commit/cc0ed0729377b5f9c4e721e121ffdb62e1db02a1

I was hoping to force the same aspect ratio across all devices. But the design has the cover image spanning the entire page, and on very wide devices this would cause the image to be way too tall. So I think we have to stick with background-size: cover

Actions #2

Updated by Raymond Hoh about 1 month ago

An alternative for desktop is at 988px and higher (for Commons Art banners anyway), we do the following: add background-repeat: repeat-x; background-size: contain, that way the cover image height stays the same, but we get a looping effect. Might not be the best approach, but it gets away from the cropping. I've attached a screenshot of what I mean. I'm also going to play around with alpha gradient effects if we semi-like this approach.

Second approach for desktop is for ideal cover images to be 1316px x 300px (1316px is the width we have set for our max-width .cac-container CSS class. In this case, we wouldn't crop for screen widths higher than 1316px, so the cover image would just be centered. At smaller screen widths between 600px and 1316px, the sides would be cropped.

Actions #3

Updated by Boone Gorges about 1 month ago

Thanks, Ray!

I kinda like a modified version of your second approach. Something like this:

- Allow background-size: cover behavior up to the maximum width of the image. So if my image is 1400px wide, continue to expand as normal until that point.
- When the viewport is wider than the width of the image, pillarbox it (left- and right-hand rectangles filling the rest of the viewport, maybe with a background color to keep the layout clear)
- We could consider adding more validation to the upload screen, detecting when a very small image is being uploaded

I don't think we necessarily need to do any of this for the upcoming release. What we currently have is probably good enough for the time being, and we could view some of these ideas as progressive enhancements.

Actions #4

Updated by Raymond Hoh about 1 month ago

- When the viewport is wider than the width of the image, pillarbox it (left- and right-hand rectangles filling the rest of the viewport, maybe with a background color to keep the layout clear)

This is doable. Yes, adding a background color would make things better. Perhaps we should use the black color we use on the Commons redesign (#222) unless anyone has any other recommendations.

I would also like to change our recommended cover image dimensions on the upload screen to 1320px x 300px. Right now, the dimensions on the "Manage > Cover Image" page are listed at 1950px x 450px.

Actions #5

Updated by Colin McDonald about 1 month ago

Thanks for diving into this, Ray and Boone. I agree that we could launch as-is and be fine, perhaps with only the edited recommended dimensions Ray suggests and the 300px consistent height, so as not to surprise anyone with that later.

Sara, let us know your thoughts, particularly on the "pillarbox" approach. I also like the idea of validating for a "too small image" upon upload. Perhaps we can define what the minimum size should be as we work on the rest of these later-release features.

Actions #6

Updated by Raymond Hoh 27 days ago

I've changed the dimensions on the "Manage > Cover Image" screen to 1400px x 300px and I've also added pillarboxing for the cover image if the screen width is larger than the cover image width. This is available for testing on cdev.

Boone, I've done the pillarboxing in this commit: https://github.com/cuny-academic-commons/cac/commit/d42c704bec894f13037056725cfd49e5c178bbfa . I'm checking the width of the cover image with PHP and then writing the CSS media query inline with JS. I'm omitting art banners temporarily from this media query until we have updated assets from Ryan.

Actions #7

Updated by Colin McDonald 21 days ago

Hello, here are the updated assets from Ryan:

https://drive.google.com/drive/folders/141hdF3LYqI70vq70OToy-oCZvwSuo86y

Let me know if you have any issues with them. He says: "The svg files are best viewable in adobe illustrator or you can drag each file into a browser window to check em’ out too."

Actions #8

Updated by Raymond Hoh 20 days ago

Thank Ryan for providing the art banner assets.

I've implemented the updated group art banners at 1400x300. This is available for testing on cdev. What's interesting is Ryan provided all his art banner mockups from when he did the CV. There are a total of 17. We're currently using 6 for the CV, so it's potentially possible to use a completely different set of art banners for groups.

I've uploaded all the alternate art banners that we could potentially choose a set of six (or more) from. (There's also one more art banner available here -- https://redmine.gc.cuny.edu/attachments/28898 ). I know it's a bit late to make these decisions, but thought having a different set of art banners for groups would be interesting.

Actions #9

Updated by Raymond Hoh 20 days ago

Actions #10

Updated by Boone Gorges 14 days ago

  • Status changed from New to Resolved
Actions

Also available in: Atom PDF