Jamwidgets
← Back to docs

Galleries

Manage photos and albums without rebuilding your site. Embed every published gallery, one gallery, or a seeded random photo.

Plain HTML

The index is the lowest-maintenance embed: publishing a new gallery adds it automatically.

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@jamwidgets/[email protected]/dist/gallery-elements.js">
</script>

<jamwidgets-gallery-index
  site-key="your-site-key"
  deep-link
></jamwidgets-gallery-index>

One gallery or tag

<jamwidgets-gallery site-key="your-site-key" slug="field-notes"></jamwidgets-gallery>

<jamwidgets-gallery
  site-key="your-site-key"
  slug="field-notes"
  tag="portraits"
></jamwidgets-gallery>

Random photo

Use a stable seed when you want the same photo for a page or visitor.

<jamwidgets-random-photo
  site-key="your-site-key"
  slug="field-notes"
  tag="favorites"
  seed="homepage"
></jamwidgets-random-photo>

Framework components

import { Gallery, GalleryIndex, RandomPhoto } from "@jamwidgets/react"

<GalleryIndex siteKey="your-site-key" deepLink />
<Gallery siteKey="your-site-key" slug="field-notes" tag="portraits" />
<RandomPhoto siteKey="your-site-key" slug="field-notes" seed="homepage" />

The same named exports and props are available from @jamwidgets/solid.

---
import GalleryIndex from "@jamwidgets/astro/GalleryIndex"
import Gallery from "@jamwidgets/astro/Gallery"
import RandomPhoto from "@jamwidgets/astro/RandomPhoto"
---

<GalleryIndex siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} deepLink />
<Gallery siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} slug="field-notes" tag="portraits" />
<RandomPhoto siteKey={import.meta.env.JAMWIDGETS_SITE_KEY} slug="field-notes" seed="homepage" />

In Astro each component has its own import path. @jamwidgets/astro/loader also exports jamwidgetsGalleriesLoader for build-time content collections.