create ImageCollector play

[AhnafAhamed]

Description

Created the Image Collector Play.

Fixes #645

Type of change

• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

• [ ] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [ ] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

@AhnafAhamed is attempting to deploy a commit to a Personal Account owned by @reactplay on Vercel.

@reactplay first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	Oct 31, 2022 at 8:53AM (UTC)

[atapas]

@murtuzaalisurti plz review

[murtuzaalisurti]

@murtuzaalisurti plz review

yeah

[AhnafAhamed]

Thanks for the feedback @murtuzaalisurti @koustov. I have added the requested changes. Thank You

[murtuzaalisurti]

@AhnafAhamed the aspect ratio is still not correct for some images as mentioned by @koustov, maybe you can do background-size: cover.

here's some reference https://css-tricks.com/almanac/properties/b/background-size/

[AhnafAhamed]

@AhnafAhamed the aspect ratio is still not correct for some images as mentioned by @koustov, maybe you can do background-size: cover.

here's some reference https://css-tricks.com/almanac/properties/b/background-size/

I have added object-fit: cover; to the image which is similar to background-size property. Do you want me to make this image a background-image and add the background-size: cover; property? Thanks

[murtuzaalisurti]

@atapas the vercel preview is not updating

[murtuzaalisurti]

@AhnafAhamed the aspect ratio is still not correct for some images as mentioned by @koustov, maybe you can do background-size: cover. here's some reference https://css-tricks.com/almanac/properties/b/background-size/

I have added object-fit: cover; to the image which is similar to background-size property. Do you want me to make this image a background-image and add the background-size: cover; property? Thanks

nope, it's okay, either way works. Looks good to me.

[atapas]

@AhnafAhamed Please take care of @koustov's comments.

[AhnafAhamed]

@AhnafAhamed Please take care of @koustov's comments.

Hi @atapas

I have already fixed it and @murtuzaalisurti also said it's fine.

Below you can see I have added different images and there is no problem with the aspect ratio.

[atapas]

Thanks @AhnafAhamed

@koustov please review

[koustov]

I still have some observations

1. Images are a bit scattered over the container. I mean these two images are way apart not properly center-aligned. (First image below)
2. Also the landscape images are cropped. Is it by design? (First image below)
3. The boxes should have bit of borders. Notice the PNG image borders are kind of vanished with the background (Second image below)

[AhnafAhamed]

Hi @koustov

I have made improvements based on your suggestions, please review them.

Thank You for the feedback.

[AhnafAhamed]

Hi @koustov any updates on this?

[murtuzaalisurti]

lgtm

@murtuzaalisurti is there anything pending from your end?

nope, all clear