Skip to content

Commit

Permalink
Fix: Issue #88 - Distorted images on stores (#90)
Browse files Browse the repository at this point in the history
#### 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)
  • Loading branch information
vsseixaso authored Aug 7, 2024
1 parent ada0702 commit c5df56d
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 4 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Fixed

- Adds the height prop to the image but without adding the maxHeight as default value

## [0.22.0] - 2024-06-25

### Added
Expand Down
8 changes: 4 additions & 4 deletions react/modules/imageAsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { ImagesSchema } from '../ImageTypes'
export const getImagesAsJSXList = (
images: ImagesSchema,
isMobile: boolean,
height: string | number,
maxHeight: string | number,
preload?: boolean,
experimentalPreventLayoutShift?: boolean,
experimentalSetExplicitDimensions?: boolean
Expand All @@ -21,7 +21,7 @@ export const getImagesAsJSXList = (
experimentalPreventLayoutShift: experimentalPreventLayoutShiftChild,
experimentalSetExplicitDimensions: experimentalSetExplicitDimensionsChild,
width = '100%',
height: _height,
height,
...props
},
idx
Expand All @@ -30,9 +30,9 @@ export const getImagesAsJSXList = (
key={idx}
src={isMobile && mobileImage ? mobileImage : image}
alt={description}
maxHeight={height}
maxHeight={maxHeight}
width={width}
height={_height ?? height}
height={height}
experimentalPreventLayoutShift={
experimentalPreventLayoutShift ?? experimentalPreventLayoutShiftChild
}
Expand Down

0 comments on commit c5df56d

Please sign in to comment.