Media

Copy Markdown View Source

Media controls present finite caller-owned collections using native lists, figures, links, scrolling, and dialogs. Callers remain responsible for image rights, safe URLs, meaningful alternatives, intrinsic dimensions, responsive sources, destinations, and restoration after server-rendered replacement.

Carousel is a named horizontal scroll region containing a complete ordered list and real fragment index links. Supply a stable id, exactly one of accessible_label or labelledby, and keyed items with labels. snap is none, proximity, or mandatory; alignment is start or center; and motion is system or none. An optional description explains the collection; there is no active slide, autoplay, cloning, or generated previous/next state.

<.carousel id="featured" accessible_label="Featured articles" snap={:proximity}>
  <:item key="welcome" label="Welcome guide">
    <h3>Welcome guide</h3>
    <a href="/guides/welcome">Read the guide</a>
  </:item>
  <:item key="release" label="Release notes">
    <h3>Release notes</h3>
    <a href="/releases/latest">Read the notes</a>
  </:item>
</.carousel>

Cover Flow

Cover Flow renders an ordered carousel of image figures with optional image-only depth presentation. It requires id, exactly one accessible name source, and nonempty atom-keyed image maps containing unique string key, src, explicit alt, positive width, and positive height; records may also contain name, caption, destination, responsive-source, loading, and decoding data. presentation is flat or enhanced, snap is none, proximity, or mandatory, alignment is start or center, and motion is system or none.

<.cover_flow
  id="landscapes"
  accessible_label="Landscape illustrations"
  presentation={:enhanced}
  images={[
    %{
      key: "ridge",
      src: "/media/ridge.svg",
      alt: "Mountain ridges beneath a warm sun",
      width: 640,
      height: 480,
      caption: "Ridge illustration",
      href: "/media/ridge.svg"
    }
  ]}
/>

Image Gallery presents responsive figures and can give each image a separate native Dialog enlargement. Images use the same required identity, source, alternative, and dimension fields as Cover Flow and may add a full image map. Choose columns from two, three, or four; density from compact or comfortable; fit from cover or contain; motion from system or none; and lightbox from none or dialog. Dialog mode also accepts initial_focus, dismissal, and close_label, while context={:dialog} prevents nesting another dialog. Keyed caption slots may customize trusted noninteractive captions.

<.image_gallery
  id="project-gallery"
  accessible_label="Project images"
  columns={:two}
  lightbox={:dialog}
  images={[
    %{
      key: "overview",
      src: "/images/overview.jpg",
      alt: "Project overview screen",
      width: 1200,
      height: 800,
      caption: "Overview",
      full: %{src: "/images/overview.jpg", width: 1200, height: 800}
    }
  ]}
/>