Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Image behavior in ImageGallery #2090

Merged
merged 3 commits into from
Nov 9, 2023
Merged

Conversation

Gmantiqueira
Copy link
Contributor

@Gmantiqueira Gmantiqueira commented Nov 1, 2023

What's the purpose of this pull request?

As related to #2059, we need more customization in our ImageGallery so we can show the image properly, with a good image position.

We tried to use Aspect Ratio for that customization, but it was breaking our layout and the property object-fit can fix that problem properly.

Before:
Screenshot 2023-11-06 at 9 49 27 PM

After:
Screenshot 2023-11-06 at 9 48 41 PM

OBS: This might be a braking change - the imagePosition prop is now deprecate, if you are using it in your implementation you'll need to adapt it.

How it works?

This PR makes the aspect ratio customizable by CMS.

This PR changes the ImageGallery object-fit property from cover to contain.

How to test it?

https://sfj-8088db8--starter.preview.vtex.app/apple-magic-mouse-99988212/p

Starters Deploy Preview

https://sfj-8088db8--starter.preview.vtex.app/

References

Copy link

vercel bot commented Nov 1, 2023

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

Name Status Preview Comments Updated (UTC)
faststore-site ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 9, 2023 5:04pm

Copy link

codesandbox-ci bot commented Nov 1, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit da6b008:

Sandbox Source
Store UI Typescript Configuration

@Gmantiqueira Gmantiqueira marked this pull request as ready for review November 1, 2023 13:58
@Gmantiqueira Gmantiqueira requested a review from a team as a code owner November 1, 2023 13:58
@Gmantiqueira Gmantiqueira requested review from gvc and ArthurTriis1 and removed request for a team November 1, 2023 13:58
Copy link
Contributor

@icazevedo icazevedo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@hellofanny
Copy link
Contributor

I don't think customizing it will reflect in the layout as expected.

@hellofanny
Copy link
Contributor

@Gmantiqueira Since image position does not work with this scenario, we should remove those examples from the doc. Can you remove it pls 👍

@Gmantiqueira Gmantiqueira changed the title feat: Custom AspectRatio for ImageGallery feat: Image behavior in ImageGallery Nov 9, 2023
@Gmantiqueira Gmantiqueira force-pushed the feat/custom-aspect-ratio branch from fbd7299 to da6b008 Compare November 9, 2023 17:01
@Gmantiqueira Gmantiqueira merged commit e0b92cc into main Nov 9, 2023
5 checks passed
@Gmantiqueira Gmantiqueira deleted the feat/custom-aspect-ratio branch November 9, 2023 18:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants