Display featured images when provided for GRSciColl institutions and collection

[ManonGros]

This relates to this issue: gbif/registry#552 and this one: gbif/registry#516. Editors will now have the possibility to provide a featured image for their collection and/or institution. Those should be displayed on the portal when provided.

[ManonGros]

Following our slack conversation, we would have:

• the image header with a ratio of 4:1 for institution and collection pages
• when collection images are provided, display them on the "collection" tab of institution (https://grscicoll.hp.gbif-uat.org/institution/ff9e52d6-7dc2-42d9-a5d4-3352ff31461f/collections) with a ratio of 3:2.

[MortenHofft]

4:1 is a difficult ratio to work with I would think. Isn't something like 5:2 more realistic for users. Especially if it is also to work well in 3:2?

Below is a 4:1 image

[MortenHofft]

There is also a difference between pages.
3:1 https://grscicoll.hp.gbif-uat.org/collection/a647fdb4-b8f9-43cc-9c8a-447ca038b393 have no sidebar.
3:2 https://grscicoll.hp.gbif-uat.org/institution/ff9e52d6-7dc2-42d9-a5d4-3352ff31461f have a sidebar.
Had the images been reversed, then the 3:2 image would have been enormous. Especially when looking at a smaller narrow laptop

[ManonGros]

Thanks @MortenHofft ! Would it make sense to have 3:2 for everything? What do you think @javiesgm ?

[MortenHofft]

I would say 5:2 or so. Would it make sense to upload various ratios to try it out in practice? on pages with and without sidebar? and keep in mind that most users are on a laptop.

It is my impression that the ratio on gbif.org has been difficult enough to find good images for. And that has a ratio of 2.8 so roughly 3:1
https://www.gbif.org/data-use/eicNfKNgbTHiIveqMpjA1/are-rare-species-more-common-than-common-species

Anyway: let me know what to do. I just felt like saying that 1:4 sounds difficult for the users

[javiesgm]

Yes, I agree with the challenge that 4:1 proposes. The relation between 3:2 and 3:1 may be better. How about having 1:1, 2:1, 3:1, and 3:2. Too many options?

[MortenHofft]

I was hoping the users only had to give us one image. And then we cropped it (or contained it) to a fixed ratio. That we always used. Perhaps with the exception of listing results where it might be useful to use something more square. But that might be what you are saying as well.

My fear is that we end up with something that look like MySpace anno 2006 by giving choice. So fixing what is possible to one ratio for all would help. Perhaps even not showing the image if the resolution is too low. Discarding animated gifs as well :)

[ManonGros]

It makes sense to use (and ask) only for one ratio. How about we drop the idea of displaying the images on the "collection" tab of institutions? That makes things complicated.

That way we can choose one ratio that looks good on institution and collection pages without having to think too much about the rest. What do you think?

[javiesgm]

Yes. That makes sense and the cropping/containment is what I had in mind. Perhaps a preview would be helpful? As occurs with the current gbif.org when previewing a post (news, event)? If it makes things more straight forward id go with one ratio, 3:2?. +1 to not showing low res images and animated gifs Javier Gamboa Martínez (45) 71799899 *www.javiergamboa.com* <http://www.javiergamboa.com> El El vie, 24 de may. de 2024 a la(s) 1:02 p.m., Morten Høfft < ***@***.***> escribió:

…

I was hoping the users only had to give us one image. And then we cropped it (or contained it) to a fixed ratio. That we always used. Perhaps with the exception of listing results where it might be useful to use something more square. But that might be what you are saying as well. My fear is that we end up with something that look like MySpace anno 2006 by giving choice. So fixing what is possible to one ratio for all would help. Perhaps even not showing the image if the resolution is too low. Discarding animated gifs as well :) — Reply to this email directly, view it on GitHub <#287 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADMPY5H4XWO7L24LQ4J3WDLZD4M4RAVCNFSM6AAAAABHYDAKWOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRZGI2TMMZVGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[MortenHofft]

3:2 on pages without sidebar (no occurrences)
https://grscicoll.hp.gbif-uat.org/institution/e772c6d6-bbc8-40c8-92e9-b74407e1f5bb

3:2 with sidebar.
https://grscicoll.hp.gbif-uat.org/institution/ff9e52d6-7dc2-42d9-a5d4-3352ff31461f

3:1 no sidebar
https://grscicoll.hp.gbif-uat.org/collection/a647fdb4-b8f9-43cc-9c8a-447ca038b393

3:1 on pages with sidebar
https://grscicoll.hp.gbif-uat.org/collection/43783fa4-48f0-4098-aaea-50d950e168e0

---

I do not think that the current layout works well with 3:2 if there is no sidebar. The image is enormous in those case. But we could rethink the way we display the images.
The registry UI now shows a preview in 1:1 and 3:1 https://registry.gbif-uat.org/collection/a647fdb4-b8f9-43cc-9c8a-447ca038b393
If users upload images that work in both ratios, then we have plenty of wiggle room to try out different layouts once we have some images. We might also learn that users find that it is too difficult to find images that work under those constraints.

[MortenHofft]

We could do like meetup and have the image in the header.

For consistency they create a blob placeholder like above when there is no image uploaded by the user.
Personally I like that the layout is consistent (there is ALWAYS an image), but then we need generic placeholder images