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

Distorted images on stores that are already in production #88

Open
felipealmeidacorrea opened this issue Jun 25, 2024 · 0 comments
Open

Comments

@felipealmeidacorrea
Copy link

The changes applied in #87 are causing images to appear distorted when they are in image lists. It appears this is happening because the height prop of the list-context.image-list is being set as the height prop for all elements in the list. If the height prop of the list is set as 500px all itens are being set with the height 500px ignoring the aspect-ratio of the element

To Reproduce
Go to any image list on editor and change the height property value, you will see when using browser inspector that the inline height value of all items are now the same you set for the list

Expected behavior
When in a list, avoid to use the height property as prop for all elements

Screenshots
image

vsseixaso added a commit that referenced this issue Aug 7, 2024
#### What problem is this solving?

This PR aims to fix the [Issue
#88](#88). An issue
generated in release
[v0.22.0](https://github.com/vtex-apps/store-image/releases/tag/v0.22.0),
which allowed setting the image height of an `image-list` via Admin Site
Editor, but set `maxHeight` as default for the image's `height` prop.
This distorted the image in accounts that had a value set for maxHeight.

With this PR, the image height will no longer receive maxHeight as the
default value, requiring the user to set a value for the prop via Admin
Site Editor.

#### How to test it?

Access the [Site
Editor](https://vsseixaso--brunoferrini.myvtex.com/admin/cms/site-editor)
and follow this sequence of blocks:

**HEADER > Header-Desktop > Slider Layout** then click on **Image
List**.

Then, access any image and set a value in the `Height` field, example:
`300px`.
Save and apply, now you can see the height of the image is different,
but defined by your change, and not by default.

#### Screenshots or example usage:

[Before](https://vsseixasobugado--brunoferrini.myvtex.com)


![image](https://github.com/user-attachments/assets/3b7009c6-7cd3-433b-800a-7b63dc90bfae)

[After](https://vsseixaso--brunoferrini.myvtex.com)


![image](https://github.com/user-attachments/assets/da187287-9cda-455e-a5ad-577ac9eaa996)

#### Describe alternatives you've considered, if any.

**Follow up**: Add an option to set height for all images in the
image-list, for now it's necessary set one by one.

#### How does this PR make you feel? [:link:](http://giphy.com/)


![](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExeGpubzhrdWRpNXZocjBpNWkyNXd3NjRsbG5wdTh3amdxeHlzbXJxMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/S1YVlFY74PCs0CLGfK/giphy.gif)
vsseixaso added a commit that referenced this issue Sep 4, 2024
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

No branches or pull requests

1 participant