The Gallery component is a flexible container for displaying collections of media, such as images or videos, in an organized layout.
It supports column layouts, masonry variants, lazy loading, and interactive viewers.

• Layouts: Supports fixed columns or masonry-style grids.
• Media types: Handles images and videos seamlessly.
• Lazy loading: Improves performance by loading media on demand.
• Interactive viewer: Optional zoom, controls, and styling for media.
• Custom content: Each media item can include captions, titles, or other elements.

Usage Example

Preview

columns

masonry

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam cupiditate optio quisquam iusto quod vel esse corporis, beatae alias unde quos nulla possimus vitae natus animi sequi ab. Debitis, facilis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas omnis totam minus sequi dolorem reprehenderit architecto fugiat! Consequuntur recusandae, sequi ut assumenda pariatur accusamus nihil. Illo eligendi autem quis deserunt!

Image 250px

description

Image 650px

description

Image 750px

description

Image 850px

description

Image 950px

description

Image 300px

description

Image 350px

description

Image 450px

description

Image 550px

description

Code

<script lang="ts">
  import { Gallery, Text } from "@fefade-ui/svelte"
  import { videoUtil } from "@fefade-ui/core/utils"

  const sizes = [200, 250, 650, 750, 850, 950, 300, 350, 450, 550]

  const { isVideo } = videoUtil()
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  <div>
    <h1>columns</h1>
    <Gallery columns={1}>
      {#each sizes.slice(0, 6) as size (size)}
        {@const src = `https://dummyjson.com/image/${size}`}
        <Gallery.Image
          lazy
          dataSrc={src}
          alt={`Image ${size}px`}
          width={size}
          height={size}
        />
      {/each}
    </Gallery>
  </div>

  <div>
    <h1>masonry</h1>
    <Gallery variant="masonry" gap={4}>
      {#each sizes as size, i (size)}
        {@const src =
          i === 0
            ? "https://res.cloudinary.com/dkufrbqih/video/upload/v1754577218/4_-_J5bdBP9_tifpyb.mp4"
            : `https://dummyjson.com/image/${size}`}
        {#if isVideo(src)}
          <Gallery.Video
            lazy
            autoplay
            muted
            loop
            dataSrc={src}
            viewer={{
              controls: true,
              style: `
              object-fit: cover;
              background: black;
              padding: 2rem;
              height: 300px;
              `
            }}
          >
            <Text as="h4" lines={1}>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam
              cupiditate optio quisquam iusto quod vel esse corporis, beatae
              alias unde quos nulla possimus vitae natus animi sequi ab.
              Debitis, facilis?
            </Text>

            <Text as="p" lines={2}>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
              omnis totam minus sequi dolorem reprehenderit architecto fugiat!
              Consequuntur recusandae, sequi ut assumenda pariatur accusamus
              nihil. Illo eligendi autem quis deserunt!
            </Text>
          </Gallery.Video>
        {:else}
          <Gallery.Image
            lazy
            dataSrc={src}
            alt={`Image ${size}px`}
            viewer={{ width: 500 }}
          >
            <h4>{`Image ${size}px`}</h4>
            <p>description</p>
          </Gallery.Image>
        {/if}
      {/each}
    </Gallery>
  </div>
</div>

Props

Prop	Type	Default	Description
columns	number	1	Number of columns for the gallery layout.
variant	"masonry" | undefined	undefined	Layout style; "masonry" enables masonry grid.
gap	number	0	Spacing between items in pixels.
Gallery.Image	component	Required	Individual image item with optional lazy loading and viewer.
Gallery.Video	component	Optional	Video item with optional autoplay, muted, loop, and viewer.
viewer	object	Optional	Viewer configuration for zoom, controls, and style.
lazy	boolean	false	Enables lazy loading for images or videos.

Best Practices

• Use lazy loading for large media collections to improve performance.
• Include alt text for images to improve accessibility and SEO.
• Combine with Gallery.Video for mixed media collections.
• Keep consistent sizes or aspect ratios for a clean layout.
• Use captions or titles to provide context for each media item.