CUNY Academic Commons

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

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.

- 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.

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.

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.

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."