generated from vtex-apps/react-app-template
-
Notifications
You must be signed in to change notification settings - Fork 26
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
Comments
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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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](https://private-user-images.githubusercontent.com/80332784/342834324-d22ca051-f9cb-4a35-bf9d-be6018f09d83.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0MjYzNTAsIm5iZiI6MTczOTQyNjA1MCwicGF0aCI6Ii84MDMzMjc4NC8zNDI4MzQzMjQtZDIyY2EwNTEtZjljYi00YTM1LWJmOWQtYmU2MDE4ZjA5ZDgzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEzVDA1NTQxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUxOTZhODZmZTc4OWQwYmMyMWE2YmEyMjVhOTcxMDMxOGY4ZDg4ZDM3ZDcxZGZkZDNmZGZlNTE4Y2RhYmE4YTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.pGFxGcDxPPC2iMYjzVdltiC3a2jwqm1NkQQxrkRmgHs)
The text was updated successfully, but these errors were encountered: