Club card image aspect ratio (#379)

[sy-pk]

Changes

• Ensured club card images maintain a square aspect ratio across all screen sizes
• Adjusted logo fitting to avoid cropping and visually align with the card background

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
clubs	Ready	Preview, Comment	Dec 22, 2025 7:51am

[TyHil]

This looks nice to me. @BK2004 what do you think?

Probably worth doing the same thing to the EventCard

[TyHil]

Just reviewing for formality. I think we need the same changes on EventCard before merging.

[sy-pk]

Just reviewing for formality. I think we need the same changes on EventCard before merging.

My concern with using object-contain with a white background on EventCard is that many events will likely reuse club logos instead of having custom thumbnails (like some of our current events). With a wider aspect ratio, this can create a lot of empty space and look awkward.
That was part of why I originally wanted to standardize image ratios, but since we decided to move forward with a 2:1 ratio and I believe Issac is already working on it, I’m not sure what the best approach is here.
I understand the goal of standardizing image behavior, but if we go that route, it might make more sense to also standardize the aspect ratio (e.g. 1:1). Otherwise, keeping object-cover for EventCard could be visually cleaner than matching the ClubCard behavior.

[TyHil]

That's a reasonable concern. What about something like className={event.image ? 'object-cover' : 'object-contain'} on the Image in the EventCard? That way we match the ClubCard behavior when using the club's image but can do something different for custom event images.

[sy-pk]

We could do it that way, but I’m a bit concerned it could cause visual inconsistency. If we treat logo fallbacks and custom thumbnails differently (logo = cover, custom image = contain), users may notice that some EventCards fill the image area while others have white space, which could be confusing.

Even if we encourage a 2:1 event thumbnail, people likely won’t always export images at exactly that ratio. Using object-contain in those cases would introduce noticeable empty space (left/right or top/bottom), which can look awkward.

If a club creates a wide thumbnail for a particular event, object-cover should work well when it is close to 2:1, and if it is not exact, object-cover is more forgiving and tends to look cleaner overall.

I also tried applying a blurred version of the logo to fill the extra space before, since most logos are close to 1:1 but not all of them are, but it didn’t end up looking as nice as I expected.

[TyHil]

object-cover for EventCard sounds all good to me!

You're right, even if we encourage a 2:1 ratio, we need it to look decent with other ratios too. I think this'll do that.