https://docs.joinmobilizon.org/use/groups/create-group/ does not mention the image size (in pixels) for a group banner. Is there a preferred size or ratio?
2 « J'aime »
Hello ? This is still not documented…
It group banner appears differently based on the window size (Reponsive web design). Here is a comparison of the default banner (9:5 ratio) with a wider banner (27-32:5).
On my laptop (1366x768px) in a Firefox (Abrowser) maximized window, I see the group banner at 1280x203 (202.5) pixels, so used that for a group image. (In a full-screen window I see it is 1280x230 (230.4)). Shrinking the window crops out the sides of the graphic (left/right) and some of its vertical edges (top/bottom).
On my phone (720x1280px; device pixel ratio: 2) in Firefox (Fennec F-Droid), the 1280x203 banner image appears as 720x370px; that is the full height of the image, scaled up 182.27% (370/203); and the width cropped to the center 30.86% (395/1280). In landscape mode, the graphic appears as 1280x568px; that is again at full height, scaled 279.81% (568/203); while horizontally cropped to 35.71% of the original width (457/1280).
This size may be pretty good (1280x203), keeping in mind that only the center horizontal third may be visible on mobile.
Meanwhile, the default group banner, which is also used as the default event banner/card, is 630x350px: on my laptop (full-screen) this appears stretched (scaled up - blurry) and the calendar icon is a little clipped, but the text (« Mobilizon ») is fully visible; on my phone, the graphic is almost fully visible in portrait mode (slight vertical cropping but border is still visible) and has more cropping in landscape mode (top/bottom border not visible) - but calendar icon and « Mobilizon » text are fully visible. So a graphic around this same size may be good as well (at higher resolution) - and keeping in mind that only the vertical center third may be visible on desktop/laptop.
Overlayed on the banner is the group avatar, and sometimes the group name. This takes up some space, especially in the mobile web browser here (up to horizontal third of banner space in portrait; and vertical half in landscape). Image transparency could be used to help with this (as in the default avatar). If the banner image has text, it might be obscured; a photo or illustration could be good where seeing some of it gives a sense of the whole.
Screenshots
Here are screenshots of a group with the default Mobilizon card banner (630x350px), and of a group with a long/wide banner (1138x205px) like described above; in laptop view (1366x768), mobile phone portrait mode (720x1280) and landscape (1280x720). This aims to give some idea of how these images crop differently in the different views.
I can’t embed these here due to new account limitations, so I put them here: https://petra.celehner.com/2023/04/06/mz-group-banners/
You can have a look at how we deal with it on https://kids.keskonfai.com/.
No more autosize, no more worry 
Feedback welcome, we might go that way for Mobilizon (this is only a patch on this specific instance)