Skip to content

Commit

Permalink
feat: Image behavior in ImageGallery (#2090)
Browse files Browse the repository at this point in the history 
## 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 --->
  • Loading branch information
Gabriel Antiqueira authored Nov 9, 2023
1 parent 65a601d commit e0b92cc
Show file tree
Hide file tree
Showing 7 changed files with 3 additions and 184 deletions.
3 changes: 0 additions & 3 deletions apps/site/components/ImageGallery/ImageGalleryUsage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ const ImageComponent = ({ url, alternateName, onLoad }) => (

export interface ImageGalleryUsageProps {
images?: ImageElementData[]
imagePosition?: 'top' | 'center' | 'bottom'
}

const ImageGalleryUsage = ({
images,
imagePosition,
}: ImageGalleryUsageProps) => {
const [selectedImageIdx, setSelectedImageIdx] = useState(0)
const currentImage = images[selectedImageIdx]
Expand All @@ -24,7 +22,6 @@ const ImageGalleryUsage = ({
images={images}
ImageComponent={ImageComponent}
selectedImageIdx={selectedImageIdx}
imagePosition={imagePosition}
setSelectedImageIdx={setSelectedImageIdx}
>
<ImageGalleryViewer>
Expand Down
123 changes: 0 additions & 123 deletions apps/site/pages/components/organisms/image-gallery.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,129 +413,6 @@ export const imagesWithoutSelector = [imagesUsage[0]]
</Tab>
</Tabs>

### Image Position

The `ImagePosition` prop sets the image position in the thumbnail and the gallery. You can check the first image changing its position in the examples below:

#### Top

<Tabs items={['Example', 'Code']} defaultIndex="0">
<Tab>
<OverviewSection>
<ImageGalleryUsage images={imagesUsage} imagePosition="top" />
</OverviewSection>
</Tab>
<Tab>
```tsx
const ImageComponent = ({ url, alternateName }) => (
<img data-fs-image src={url} alt={alternateName} />
)

export const images = [imagesUsage[0]]

const [selectedImageIdx, setSelectedImageIdx] = useState(0)
const currentImage = images[selectedImageIdx]

<ImageGallery
images={images}
ImageComponent={ImageComponent}
selectedImageIdx={selectedImageIdx}
setSelectedImageIdx={setSelectedImageIdx}
imagePosition="top"
>
<ImageGalleryViewer>
<img
data-fs-image
src={currentImage.url}
alt={currentImage.alternateName}
/>
</ImageGalleryViewer>
</ImageGallery>

```

</Tab>
</Tabs>

#### Center (default)

<Tabs items={['Example', 'Code']} defaultIndex="0">
<Tab>
<OverviewSection>
<ImageGalleryUsage images={imagesUsage} imagePosition="center" />
</OverviewSection>
</Tab>
<Tab>
```tsx
const ImageComponent = ({ url, alternateName }) => (
<img data-fs-image src={url} alt={alternateName} />
)

export const images = [imagesUsage[0]]

const [selectedImageIdx, setSelectedImageIdx] = useState(0)
const currentImage = images[selectedImageIdx]

<ImageGallery
images={images}
ImageComponent={ImageComponent}
selectedImageIdx={selectedImageIdx}
setSelectedImageIdx={setSelectedImageIdx}
>
<ImageGalleryViewer>
<img
data-fs-image
src={currentImage.url}
alt={currentImage.alternateName}
/>
</ImageGalleryViewer>
</ImageGallery>

```

</Tab>
</Tabs>

#### Bottom

<Tabs items={['Example', 'Code']} defaultIndex="0">
<Tab>
<OverviewSection>
<ImageGalleryUsage images={imagesUsage} imagePosition="bottom" />
</OverviewSection>
</Tab>
<Tab>
```tsx
const ImageComponent = ({ url, alternateName }) => (
<img data-fs-image src={url} alt={alternateName} />
)

export const images = [imagesUsage[0]]

const [selectedImageIdx, setSelectedImageIdx] = useState(0)
const currentImage = images[selectedImageIdx]

<ImageGallery
images={images}
ImageComponent={ImageComponent}
selectedImageIdx={selectedImageIdx}
setSelectedImageIdx={setSelectedImageIdx}
imagePosition="bottom"
>
<ImageGalleryViewer>
<img
data-fs-image
src={currentImage.url}
alt={currentImage.alternateName}
/>
</ImageGalleryViewer>
</ImageGallery>

```

</Tab>
</Tabs>

---

## Customization
Expand Down
6 changes: 0 additions & 6 deletions packages/components/src/organisms/ImageGallery/ImageGallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,6 @@ export interface ImageGalleryProps extends HTMLAttributes<HTMLDivElement> {
* Event handler for clicks on each thumbnail.
*/
setSelectedImageIdx: (idx: number) => void
/**
* The position of the thumbnail and gallery image.
*/
imagePosition: 'top' | 'center' | 'bottom'
}

const ImageGallery = forwardRef<HTMLDivElement, ImageGalleryProps>(
Expand All @@ -55,7 +51,6 @@ const ImageGallery = forwardRef<HTMLDivElement, ImageGalleryProps>(
children,
ImageComponent,
selectedImageIdx,
imagePosition = 'center',
setSelectedImageIdx,
testId = 'fs-image-gallery',
...otherProps
Expand All @@ -70,7 +65,6 @@ const ImageGallery = forwardRef<HTMLDivElement, ImageGalleryProps>(
data-fs-image-gallery={
hasSelector ? 'with-selector' : 'without-selector'
}
data-fs-image-gallery-position={imagePosition}
data-testid={testId}
{...otherProps}
>
Expand Down
12 changes: 0 additions & 12 deletions packages/core/cms/faststore/sections.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1442,18 +1442,6 @@
"default": "Description"
}
}
},
"imageGallery": {
"title": "Image Gallery",
"type": "object",
"properties": {
"imagePosition": {
"type": "string",
"title": "Image Position",
"enumNames": ["Center", "Top", "Bottom"],
"enum": ["center", "top", "bottom"]
}
}
}
}
}
Expand Down
5 changes: 0 additions & 5 deletions packages/core/src/components/sections/ProductDetails/ProductDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,6 @@ export interface ProductDetailsProps {
displayDescription: boolean
initiallyExpanded: 'first' | 'all' | 'none'
}
imageGallery: {
imagePosition: 'top' | 'center' | 'bottom'
}
notAvailableButton: {
title: string
}
Expand Down Expand Up @@ -89,7 +86,6 @@ function ProductDetails({
initiallyExpanded: productDescriptionInitiallyExpanded,
displayDescription: shouldDisplayProductDescription,
},
imageGallery: { imagePosition = ImageGallery.props.imagePosition },
notAvailableButton: {
title: notAvailableButtonTitle = NotAvailableButton.props.title,
},
Expand Down Expand Up @@ -186,7 +182,6 @@ function ProductDetails({
<ImageGallery.Component
data-fs-product-details-gallery
{...ImageGallery.props}
imagePosition={imagePosition}
images={productImages}
/>
<section data-fs-product-details-info>
Expand Down
8 changes: 1 addition & 7 deletions packages/core/src/components/ui/ImageGallery/ImageGallery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,9 @@ const ImageComponent = ({ url, alternateName }) => {

export interface ImageGalleryProps {
images: UIImageGalleryProps['images']
imagePosition?: UIImageGalleryProps['imagePosition']
}

const ImageGallery = ({
images,
imagePosition,
...otherProps
}: ImageGalleryProps) => {
const ImageGallery = ({ images, ...otherProps }: ImageGalleryProps) => {
const [selectedImageIdx, setSelectedImageIdx] = useState(0)
const currentImage = images[selectedImageIdx] ?? images[0]
const dynamicRoute = useRouter().asPath
Expand All @@ -39,7 +34,6 @@ const ImageGallery = ({
ImageComponent={ImageComponent}
selectedImageIdx={selectedImageIdx}
setSelectedImageIdx={setSelectedImageIdx}
imagePosition={imagePosition ?? ImageGalleryWrapper.props.imagePosition}
{...otherProps}
>
<ImageGalleryViewer.Component {...ImageGalleryViewer.props}>
Expand Down
30 changes: 2 additions & 28 deletions packages/ui/src/components/organisms/ImageGallery/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,15 +214,6 @@
}
}

@mixin image_pos($pos) {
[data-fs-image-gallery-position='#{$pos}'] {
object-position: $pos;
[data-fs-image] {
object-position: $pos;
}
}
}

// --------------------------------------------------------
// Variants Styles
// --------------------------------------------------------
Expand All @@ -235,24 +226,7 @@
}
}

&[data-fs-image-gallery-position="top"] {
> [data-fs-image],
[data-fs-image-gallery-selector-thumbnail] [data-fs-image] {
object-position: top;
}
}

&[data-fs-image-gallery-position="center"] {
> [data-fs-image],
[data-fs-image-gallery-selector-thumbnail] [data-fs-image] {
object-position: center;
}
}

&[data-fs-image-gallery-position="bottom"] {
> [data-fs-image],
[data-fs-image-gallery-selector-thumbnail] [data-fs-image] {
object-position: bottom;
}
> [data-fs-image] {
object-fit: contain;
}
}

1 comment on commit e0b92cc

@vercel
Copy link

@vercel vercel bot commented on e0b92cc Nov 9, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

faststore-site – ./

faststore-site-git-main-faststore.vercel.app
faststore-site-faststore.vercel.app
faststore.dev
faststore-site.vercel.app
www.faststore.dev

Please sign in to comment.