Media gallery

Last change: None yet. In the viewer, the keyboard button (or ?) lists the keys. On a phone: swipe, pinch, double tap.

fandry-media-gallery {
  --fd-media-columns: 4;
  --fd-media-gap: 0.75rem;
  --fd-media-aspect-ratio: 1 / 1;
  --fd-media-fit: cover;
}

Install

LWR / LWC OSS

npm install fandryui

<!-- nothing to copy: your bundler ships only what you use -->
<fandry-media-gallery></fandry-media-gallery>

Salesforce DX

npx fandry add media-gallery
# adds the block and everything it is built from
# to your package directory, as source you own

Usage

<fandry-media-gallery
  items={photos}
  loading={loading}
  onchange={handleChange}
></fandry-media-gallery>

An item is plain data:

photos = [
  {
    id: 'lake',              // unique and stable
    src: '/media/lake.jpg',  // the full file, for the viewer
    thumbnail: '/media/lake-400.jpg',
    alt: 'A pine forest above a calm bay.',
    caption: 'Above the bay',
    width: 1280,
    height: 960,
    loading: 'eager'         // only for pictures on screen at page load
  },
  ...
];

Props and methods

Item

Events

Tokens

Layout and look are tokens, not props: set them on :root, on a section, or on one gallery.

Parts

Make it yours: a product gallery

A store's product page wants one big picture and a strip of thumbnails, not a grid. This one extends fandry/mediaGalleryState and writes only its own markup: the current picture, focus coming back after the viewer, the events and the full-screen viewer with swipe and zoom all come from the block.

// productGallery.js -- your markup, the block's behavior
import FdMediaGalleryState from 'fandry/mediaGalleryState';

export default class ProductGallery extends FdMediaGalleryState {
  // `current` is undefined while there are no items.
  get main() {
    return { src: this.current?.src ?? '', alt: this.current?.alt ?? '' };
  }

  handleThumb(event) {
    this.goTo(Number(event.currentTarget.dataset.thumb));
  }
}

<!-- productGallery.html -->
<fandry-button variant="ghost" data-index={currentIndex} onclick={handleSelect}>
  <img src={main.src} alt={main.alt} />
</fandry-button>
<ul>
  <template for:each={thumbs} for:item="thumb">
    <li key={thumb.key}>
      <fandry-button variant="ghost" data-thumb={thumb.index} onclick={handleThumb}>...</fandry-button>
    </li>
  </template>
</ul>
<fandry-media-viewer
  items={items}
  index={currentIndex}
  open={viewerOpen}
  messages={messages}
  onchange={handleViewerChange}
  ontoggle={handleViewerToggle}
></fandry-media-viewer>

The pieces

fandry/mediaGalleryState has the behavior and no template. fandry/mediaGallery is that class plus a grid and a viewer. fandry/mediaGrid and fandry/mediaViewer each work on their own and know nothing of each other; what they share is the item shape in fandry/mediaItem. The viewer is split the same way: fandry/mediaViewerState has its keyboard, swipe and zoom and no template. fandry/mediaGestures is the swipe and pinch math, with no template. To change the markup, extend a state class, or, on Salesforce, edit the copy fandry add put in your project. Built from:dialogbuttonicontextskeleton