ShadcnUI.Components.Media.ImageGallery (shadcn_ui v1.0.0)

Copy Markdown View Source

A named responsive list of caller-owned image figures and complete destinations.

Require a unique id, exactly one accessible_label/labelledby and nonempty images. Shared atom-keyed image records require stable key, src, explicit alt, positive width/height; optional name, caption, href, srcset/sizes, loading, decoding and full-size metadata are validated without fetching or processing. Decorative images require empty alt, decorative: true and an independent name. The ordinary link uses explicit href, else full.src, else the supplied src.

Columns are two/three/four (three default), density compact/comfortable, fit cover/contain. Layout collapses to one column in narrow containers. Caption slots are keyed, trusted noninteractive HEEx; a slot overrides its plain record caption. Do not place controls, dialogs or unscoped IDs in caption content. A caption slot receives %{key: key, context: :thumbnail | :full}; it is rendered in both presentations, so keep it presentation-only and scope any IDs.

lightbox is :dialog (default) or :none. Each native Dialog has its own thumbnail invoker, visible title and close control, with no current-image state. initial_focus is :auto, :content or :close; dismissal is :close_request, :none or :any. Declare context: :dialog when embedded in a modal: only lightbox: :none is permitted there. The package cannot infer ancestor HEEx. Enlarged images use full metadata when supplied, otherwise the same source; they always use bounded contain sizing. Origin transitions are not shipped.

Native loading/decoding are hints, not deferred-fetch or privacy guarantees. Applications own rights, CSP/origin policy, URL authorization, meaningful text, dimensions, responsive candidates, destinations and replacement/restoration. Image failures keep native alt, complete captions and ordinary links. No loader, current-image state, uploads, transformation or runtime is provided.

Summary

Functions

Renders validated responsive figures and separate complete image links.

Functions

image_gallery(assigns)

Renders validated responsive figures and separate complete image links.

Attributes

  • id (:string) (required)
  • accessible_label (:string) - Defaults to nil.
  • labelledby (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • images (:list) (required)
  • columns (:atom) - Defaults to :three. Must be one of :two, :three, or :four.
  • density (:atom) - Defaults to :comfortable. Must be one of :compact, or :comfortable.
  • fit (:atom) - Defaults to :cover. Must be one of :cover, or :contain.
  • motion (:atom) - Defaults to :system. Must be one of :system, or :none.
  • lightbox (:atom) - Defaults to :dialog. Must be one of :none, or :dialog.
  • context (:atom) - Defaults to :root. Must be one of :root, or :dialog.
  • initial_focus (:atom) - Defaults to :auto. Must be one of :auto, :content, or :close.
  • dismissal (:atom) - Defaults to :close_request. Must be one of :none, :close_request, or :any.
  • close_label (:string) - Defaults to "Close image".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • caption - Accepts attributes:
    • key (:string) (required)