Display

Media Grid

Image, video and document tiles for a chat message that open a Lightbox gallery.

<script>
  import { MediaGrid } from "@codeatlasdev/ui";
</script>

<MediaGrid items={[{ src: "/a.jpg", alt: "Beach" }, { type: "video", src: "/b.mp4", thumb: "/b.jpg", duration: "0:12" }]} />

Tiles keep their box while the thumbnail loads (a skeleton shows meanwhile) and show an error state if it fails. Past maxVisible the last tile reads “+N more” and opens the gallery at that index. Images and videos open a Lightbox with previous and next; documents are plain download links and stay out of the gallery.

#253

Mixed media

Images, a video, a document and the +N overflow tile.

invoice-0412.pdf 84 KB

Reference #253 · Pick in the gallery

Code

<script lang="ts">
  import { MediaGrid, type MediaGridItem } from '@codeatlasdev/ui';

  // Inline SVG data URLs keep the demo offline and deterministic.
  const art = (hue: number, label: string) =>
    `data:image/svg+xml,${encodeURIComponent(
      `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480"><rect width="480" height="480" fill="hsl(${hue} 55% 60%)"/><text x="240" y="260" font-size="64" text-anchor="middle" fill="white" font-family="sans-serif">${label}</text></svg>`
    )}`;

  const items: MediaGridItem[] = [
    { src: art(210, 'A'), alt: 'Beach' },
    { src: art(20, 'B'), alt: 'Market', caption: 'Saturday market' },
    { type: 'video', src: '', thumb: art(130, '▶'), alt: 'Clip', duration: '0:12' },
    { type: 'document', src: '#', title: 'invoice-0412.pdf', size: '84 KB' },
    { src: art(300, 'E'), alt: 'Dinner' },
    { src: art(60, 'F'), alt: 'Sunset' },
  ];
</script>

<div class="box"><MediaGrid {items} maxVisible={4} /></div>

<style>
  .box { max-inline-size: 22rem; }
</style>

Props

Prop	Type	Default	Description
`items`	`MediaGridItem[]`	–	{ type?, src, thumb?, alt?, title?, caption?, meta?, duration?, poster?, download?, size? }.
`maxVisible`	`number`	`4`	Tiles shown before the +N overflow tile.
`columns`	`1 \| 2 \| 3`	–	Defaults by item count.
`label`	`string`	–	Accessible name of the group.
`onopen`	`(index: number, item: MediaGridItem) => void`	–	Called when a tile is opened.
`ondownload`	`(item, index) => void`	–	Forwarded to the Lightbox Download button.