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

The Image Gallery lacks a zoom-in/out feature, and the default image display doesn't fit properly #2059

Open
victors1682 opened this issue Oct 11, 2023 · 5 comments
Labels
bug Something isn't working

Comments

@victors1682
Copy link
Contributor

The Image Gallery lacks a zoom-in/out feature, and the default image display doesn't fit properly

Continuation from the issue: #1894 to keep tracking this pending feature

This is the image uploaded
Screenshot 2023-10-05 at 11 19 44 AM

This is how it looks
Screenshot 2023-10-05 at 11 10 37 AM

@victors1682 victors1682 added the bug Something isn't working label Oct 11, 2023
@renatamottam
Copy link
Contributor

Hey @victors1682! Which ImagePosition did you used for this?

@victors1682
Copy link
Contributor Author

@renatamottam 'center'

@renatamottam
Copy link
Contributor

Nice, and you changed this on the CMS, right?
image

@victors1682
Copy link
Contributor Author

@renatamottam The component is currently receiving the 'center' parameter directly because we're utilizing a custom PDP. I'll share the code changes via Slack. The issue here is that the gallery is currently using 'object-fit: cover,' which is causing the image to be rendered like this. We're considering overwriting the CSS to set the gallery to 'object-fit: contain.' However, note that this change might potentially interfere with the zoom in/out feature once it's implemented, this is why we're waiting to sole this this from the core.

@renatamottam
Copy link
Contributor

renatamottam commented Oct 11, 2023

Update about this issue:

  • the ImagePosition prop is working as expected, but there's no possibility today to customize the aspectRatio of the current selected image on the ImageGallery.
  • Currently, all images fits a 3/4 format and cover all the space limit, being cropped if needed.
  • A task was created to improve the possibilities of customization.

Gmantiqueira added a commit that referenced this issue Nov 9, 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: 
<img width="1792" alt="Screenshot 2023-11-06 at 9 49 27 PM"
src="https://github.com/vtex/faststore/assets/42946693/97d137a4-80ae-448e-8ef8-618ae6675d2b">


After:
<img width="1792" alt="Screenshot 2023-11-06 at 9 48 41 PM"
src="https://github.com/vtex/faststore/assets/42946693/b3b793b9-5f28-4bcc-9d87-03a27762d689">



## 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

<!--- Spread the knowledge: is there any content you used to create this
PR that is worth sharing? --->

<!--- Extra tip: adding references to related issues or mentioning
people important to this PR may be good for the documentation and
reviewing process --->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants