Gallery

Description

The Gallery is a robust, customizable, and interactive component designed to display a group of images or videos in a grid format. This component is composed of several smaller subcomponents, each providing specific functionality to make the Gallery a comprehensive and interactive image browsing experience.

Importing

import {
  Gallery,
  GalleryGroup,
  GalleryGroupsContainer,
  GalleryModal,
  GalleryModalContent,
  GalleryLabel
} from '@ef-global/backpack/Gallery';

Subcomponents

Gallery

<Gallery>
    <GalleryGroupsContainer>
        {/* GalleryGroupsContainer subcomponents */}
    </GalleryGroupsContainer>
    <GalleryModal>{/* GalleryModal subcomponents */}</GalleryModal>
    <GalleryLabel>{/* GalleryLabel text */}</GalleryLabel>
</Gallery>

This is the main Gallery component. It acts as a container for the following components:

GalleryGroupsContainer
GalleryModal
GalleryLabel

Props

Name	Type	Default	Description
id	string	-	A unique identifier for the Gallery
className	string	-	Custom classnames to add to the Gallery
children	ReactElement	-	Child components inside the Gallery component. It could be GalleryGroupsContainer, GalleryModal, and GalleryLabel

GalleryGroupsContainer

    <Gallery>
        <GalleryGroupsContainer>
            {/* GalleryGroup components go here */}
        </GalleryGroupsContainer>
        {/* Other optional components */}
    </Gallery>

The GalleryGroupsContainer is a container for GalleryGroup components.

Props

Prop	Type	Default	Description
`galleryId`	string	-	An identifier for the gallery.
`interactive`	boolean	false	A flag indicating if the gallery is interactive.
`className`	string	-	The class name to apply to the gallery.
`children`	ReactElement<typeof GalleryGroup> or Array of ReactElement<typeof GalleryGroup>	-	The children of the gallery.

GalleryGroup

    <Gallery>
        <GalleryGroupsContainer>
            <GalleryGroup {...args}>
                {/* GalleryGroupAssets go here */}
            </GalleryGroup>
        </GalleryGroupsContainer>
        {/* Other optional components */}
    </Gallery>

The GalleryGroup component organizes the child elements into a specific layout pattern. Each GalleryGroup could contain multiple Image and Video components. The layout for each GalleryGroup could be different based on the props provided.

The layout prop can take the following types:

For mobile and tablet devices: 'natural'.
For desktop devices:
- '16/9'
- '16/9 - 16/9'
- '1/1 - 1/1'
- '9/16 - 4/3'
- '3/4 - 4/3 - 16/9'
- '4/3 - 4/3 - 4/3'
- '1/1 - 1/1 - 1/1'

Props

Prop	Type	Default	Description
`children`	`node`	-	The content of the GalleryGroup: `Image` or `Video` components.
`layout`	`string`	'natural'	Determines the layout pattern of the gallery. Can take different formats for mobile and desktop devices.

GalleryModal

    <Gallery>
        {/* Other components */}
        <GalleryModal>
            <GalleryModalContent />
        </GalleryModal>
    </Gallery>

The GalleryModal is a component that displays a larger version of an image or video when clicked on. The GalleryModalContent component goes within this and displays the larger content.

Props

Prop	Type	Default	Description
`children`	`ReactElement<typeof GalleryModalContent>`	-	The content of the GalleryModal, typically a `GalleryModalContent` component.
`className`	`string`	-	Optional. Additional CSS class to apply to the component.
`...rest`	`Omit<ModalProps, 'children'>`	-	Other props are passed down to the underlying `Modal` component.

GalleryLabel

    <Gallery>
        {/* Other components */}
        <GalleryLabel variant={'link'}>
            See all
        </GalleryLabel>
    </Gallery>

GalleryLabel is a component that functions as a trigger for opening a modal gallery. It comes in two variants: 'link' and 'tag'. The 'link' variant is a simple text link, while the 'tag' variant is a labeled tag. The label shows the count of images in the associated gallery. When clicked, the label triggers the opening of the associated gallery at the first image.

Props

Prop	Type	Default	Description
variant	`GalleryLabelVariant`	`'link'`	The variant of the gallery label. It can be either 'link' or 'tag'.
className	`string`	-	Optional. An additional CSS class to apply to the component.
children	`ReactNode`	-	Optional. Any child nodes will be rendered inside the gallery label. This is typically text content.

Usage

Non-interactive gallery

This is a simple example of how to use the GalleryGroup component with a set layout and Images as children. Since no GalleryModal is passed, the gallery will be rendered as a non-interactive gallery.

<Gallery>
  <GalleryGroupsContainer>
    <GalleryGroup layout='1/1 - 1/1 - 1/1'>
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/1396x2368/5b940958e6/pisa.jpg'
      />
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/3840x2124/fbd9220094/backpacker.jpg'
      />
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/3840x2124/d14f1944d6/mountains.jpg'
      />
    </GalleryGroup>
  </GalleryGroupsContainer>
</Gallery>

Gallery with Modal and Tag Label

This example demonstrates how to create a Gallery with multiple GalleryGroups, a GalleryModal, and a Link variant GalleryLabel. In this case, GalleryLabel does not have any children, so it will render just the image count.

<Gallery>
  <GalleryGroupsContainer>
    <GalleryGroup layout={'3/4 - 4/3 - 16/9'}>
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/1396x2368/5b940958e6/pisa.jpg'
        data-slot={'Image'}
      />
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/3840x2124/fbd9220094/backpacker.jpg'
        data-slot={'Image'}
      />
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/3840x2124/d14f1944d6/mountains.jpg'
        data-slot={'Image'}
      />
    </GalleryGroup>
    <GalleryGroup layout={'16/9 - 16/9'}>
      <Video
        url={'https://vimeo.com/357511081'}
        light={true}
        playing={true}
        data-slot={'Video'}
      />
      <Image
        alt='Image alternate'
        src='https://a.storyblok.com/f/185562/2368x2376/00ee361383/photography.jpg'
        data-slot={'Image'}
      />
    </GalleryGroup>
  </GalleryGroupsContainer>
  <GalleryModal>
    <GalleryModalContent />
  </GalleryModal>
  <GalleryLabel variant={'tag'} />
</Gallery>

Gallery with Modal and Link Label

<Gallery>
  {/* Same as the example above */}
  <GalleryLabel variant={'link'}>See all</GalleryLabel>>
</Gallery>

Focus Grid