Fix images on the Events Components

[katungi]

The dynamic images are scaling wrongly on the events component, This is a small issue that's a good first issue 👏🏿

[fosa-ij]

hey @katungi i would like to work on this issue

[fosa-ij]

Nevermind @katungi

[katungi]

Hey @fosa-ij , still interested in working on the issue??

[DreMukare]

Hey @katungi Gimme more insight on the bug

[katungi]

Hey @DreMukare , So on the events component, the images look bad. Ideally, they should fit the image component as per the design. So the task will be to make those images from the events data play well within the images. Also, if you are feeling energetic and want to explore, you can try refactoring from the native img tag to using Next's Image tag.

Can you handle this?

[DreMukare]

Yes i can :)

[katungi]

Hey @DreMukare , any update on this issue?

[johnGachihi]

@katungi I'd like to continue with this

[katungi]

Hey @johnGachihi , yeah sure thing - go on and work on it.

[johnGachihi]

@M-Tee, @katungi Eventbright uses landscape images but the event card design is for square images. The options I see for dealing with this mismatch are stretching and cutting the images to fit the square cards (which is how it is now) or rendering the images in landscape and filling the remaining space in the square cards like below.

What do you think? Should we go with one of these?

[katungi]

Hey @johnGachihi - I really like the last one. It's simple and concise!

[johnGachihi]

@katungi I've tried playing around with the last option but it's leaving a lot of empty space which doesn't look good, especially on tablet-size screens. @M-Tee your opinion would really be appreciated.

[katungi]

Hey @johnGachihi , could you send a screenshot?

[johnGachihi]

These are both on screen width 820px. The problem is mainly on the large event card

With the original layout

With a different layout meant to reduce the size of the large event card

[johnGachihi]

:see_no_evil: I just noticed that the Eventbrite API also returns a url for the original uncropped event image. And the images are big enough to not get pixelated. I'll send a PR soon.