IIIF Logo

IIIF Gallery Builder — Help

Full Tutorial Open Gallery Builder

Getting Started

The IIIF Gallery Builder lets you create, view, and share curated collections of images from libraries, archives, and museums around the world. Where would you like to begin?

🔗

I received a gallery link

Someone shared a gallery with you and you want to view it, add notes, or save your own version.

🔨

I'm building a new gallery

You want to create a gallery from scratch by adding images from IIIF-compatible institutions.

The IIIF Gallery Builder is a free tool for creating curated image galleries from libraries, archives, and museums worldwide. Thousands of institutions — including the Library of Congress, the British Library, Stanford, Yale, and the David Rumsey Map Collection — share their images using an open standard called IIIF (International Image Interoperability Framework). This tool lets you pull images from any of those institutions into a single gallery.

You can zoom into high-resolution images, rearrange them, add curator notes, and share your gallery with colleagues or students.

💡 Tip: No account or installation required. The tool runs entirely in your browser.

The Gallery Builder has three different views, each suited to a different purpose. When someone shares a gallery link with you, notice which URL it uses:

🔨 Builder

Create and edit galleries. Add images, write curator notes, reorder cards, and save your work.

index.html

👁 Viewer

Read-only view with curator notes visible. Share this with colleagues who need context.

viewer.html

📽 Presentation

Clean view with no notes or editing tools. Ideal for classroom display or public presentations.

presentation.html

You can switch between modes by changing the filename in the URL. For example:

https://davidrumseymapcenter.github.io/set-builder/viewer.html?file=YOUR_GALLERY_URL
https://davidrumseymapcenter.github.io/set-builder/presentation.html?file=YOUR_GALLERY_URL

Click any thumbnail to load the full high-resolution image in the viewer on the right.

  • Zoom: Use the mouse wheel, or the +/− buttons in the viewer
  • Pan: Click and drag
  • Reset: Click the home button to return to the full view
  • Resize the viewer: Drag the divider between the gallery and viewer panels

Each card shows the image title, author, date, collection, and attribution, along with links to the source item, the IIIF manifest, and the Allmaps georeferencing editor.

Working with Galleries

Someone shared a gallery link with you. Here's how to view it, make changes, and pass it along.

If someone sent you a link, just open it in your browser. The gallery loads automatically.

If you received a JSON file by email instead:

  1. Open the Gallery Builder
  2. In the Load Gallery section, click Choose File
  3. Select the JSON file from your computer
  4. The gallery loads immediately

Click any thumbnail to load the full high-resolution image in the viewer on the right. Use the mouse wheel to zoom, click and drag to pan, and the home button to reset the view.

💡 Tip: Opening someone else's gallery never changes their original. You're always working on your own copy.

Make sure you're in Builder mode

In Builder mode you can edit Curator Notes and save other changes like reordering, removing, and adding images.

⚠️ If someone sent you a viewer.html or presentation.html link, change the filename in the URL to index.html to switch to Builder mode.

Example:
If you received this link:
https://davidrumseymapcenter.github.io/set-builder/viewer.html?file=https://...
Change it to:
https://davidrumseymapcenter.github.io/set-builder/index.html?file=https://...

Reordering images

Click and drag any card to move it to a new position in the gallery. Note that you can drag cards around in Viewer or Presentation mode but the new order won't be preserved when you close the tab.

Adding images

Use the Add IIIF Manifests section in the input panel to add more images from any IIIF-compatible institution. See the Building a Gallery section for details.

Removing images

Hover over any card and click the × button that appears in the top-right corner. You'll be asked to confirm before the card is removed.

Adding curator notes

  1. Click ▶ Curator Notes at the bottom of any card to expand the notes area
  2. Type your note in the text box
  3. When you save the gallery, your note is automatically date-stamped and saved with the image
  4. You can add new notes on top of existing ones — each is date-stamped so it's clear who added what and when.
💡 Tip: Notes are visible in Viewer mode but not editable, and hidden in Presentation mode.
⚠️ Important: The gallery exists only in your browser until you save it. Nothing is saved automatically. If you close the tab without saving, your changes will be lost.

Saving to your computer

  1. Give your gallery a name in the Save Gallery section
  2. Click 💾 Save File
  3. A JSON file downloads to your computer

Sharing by email

  1. Save your gallery as a JSON file
  2. Attach the file to an email
  3. Include a link to the Gallery Builder: https://davidrumseymapcenter.github.io/set-builder/
  4. Ask the recipient to use Load Gallery → Choose File to open it

Sharing via a link

Upload your gallery to GitHub Gist to get a permanent shareable link. See the Sharing & Embedding section for full instructions.

Once you have a cloud-hosted link, choose which mode to share:

If you want to... Use this URL
Let someone edit the gallery index.html?file=...
Share notes with a colleague viewer.html?file=...
Show the gallery in class presentation.html?file=...

Building a Gallery

Start from scratch by adding images from any IIIF-compatible institution. Thousands of libraries, archives, and museums participate.

A IIIF manifest is a link that describes a digital object — a map, photograph, book, or artwork — and tells the Gallery Builder how to display it. Most participating institutions provide a manifest link on the item's page.

Look for a IIIF logo IIIF or a link labeled "IIIF Manifest" on the item page.

💡 Tip: This guide from IIIF.io lists participating institutions and explains how to find manifest URLs at each one.
  1. Click ▶ Add IIIF Manifests in the input panel to expand it
  2. Paste one or more manifest URLs (comma-separated for multiple)
  3. Click Add Manifest(s)
  4. If the manifest has multiple pages, a page selector will appear — choose which pages to add
  5. The image appears as a card in the gallery
💡 Tip: You can add images from multiple institutions in the same gallery.
  • Reorder cards: Click and drag any card to a new position
  • Remove a card: Hover over the card and click the × button that appears
  • View an image: Click the thumbnail to load it in the viewer on the right
  • Resize the viewer: Drag the divider bar between the gallery and viewer

There are two save options in the Save Gallery section:

Button What it saves Use when...
💾 Save File A gallery file you can reload in this app You want to keep working on it, share it with colleagues, or use it in the viewer or presentation modes
IIIF icon A standard IIIF manifest for use in other viewers You want to open the gallery in Universal Viewer, Mirador, or another IIIF-compatible tool
💡 Tip: When in doubt, use 💾 Save File. It preserves everything including curator notes and your page selections from multi-page documents.

Sharing & Embedding

Share your gallery as a link, embed it in Canvas, or collaborate with colleagues.

GitHub Gist is a free service for hosting files publicly. Uploading your gallery JSON there gives you a permanent link you can share with anyone.

Step 1 — Save your gallery

Use 💾 Save File to download your gallery JSON.

Step 2 — Upload to Gist

  1. Go to gist.github.com
  2. Sign in, or skip for an anonymous gist
  3. Drag and drop your JSON file into the text box
  4. Give it a descriptive filename (e.g., colonial-maps.json)
  5. Click Create public gist

Step 3 — Get the raw URL

  1. On your new gist page, click the Raw button
  2. Copy the URL from your browser's address bar

Step 4 — Build your shareable link

https://davidrumseymapcenter.github.io/set-builder/index.html?file=PASTE_RAW_URL_HERE

Replace index.html with viewer.html or presentation.html to share in a different mode.

⚠️ Anonymous gists cannot be edited or deleted once created. Sign in to GitHub to keep full control of your files.
💡 Tip: When you update your gallery, upload the new JSON to Gist and update the file there. The raw URL stays the same if the filename doesn't change.

You can embed a gallery directly into a Canvas page so students can interact with it without leaving Canvas.

Step 1 — Get your gallery URL

Follow the GitHub Gist steps above to create a shareable link. Use presentation.html for a clean classroom view, or viewer.html if you want curator notes to be visible.

Step 2 — Embed in Canvas

  1. Edit the Canvas page where you want the gallery
  2. Click the </> HTML editor button
  3. Paste this code:
<iframe src="YOUR_GALLERY_URL" width="100%" height="900" style="border: 1px solid #ccc; border-radius: 4px;" title="IIIF Image Gallery"> </iframe>
  1. Replace YOUR_GALLERY_URL with your actual link
  2. Save the page
💡 Tip: Canvas may awkwardly constrain the width of the gallery. Add a link above the iframe so students can open the gallery in a new window.
⚠️ Canvas security: Some institutions block external iframes. If the gallery doesn't appear, contact your Canvas administrator, or use the "Open in new window" approach instead.

Recommended iframe settings

Setting Recommended value
width 100%
height 900 or 1000
title Descriptive name (for accessibility)

For a detailed walkthrough with screenshots, see the full tutorial.

The Gallery Builder doesn't have real-time collaboration, but a simple version-based workflow works well:

  1. Person A builds the initial gallery and saves it as project-v1.json
  2. Person A uploads to Gist and shares the link
  3. Person B opens the link, adds images and notes, saves as project-v2.json
  4. Person B uploads their version to Gist and shares back
  5. Continue until the gallery is complete
💡 Tip: Include version numbers and initials in your filenames (e.g., colonial-maps-v2-KL.json) to keep track of who changed what.

Help

Common issues and how to fix them. If you're stuck, the full tutorial has detailed screenshots for most workflows.

This usually means the URL is wrong, or the institution's server is blocking the request.

  • Double-check the URL is complete and copied correctly
  • Open the URL directly in a new browser tab — does it show JSON text?
  • Make sure it's a manifest URL (usually contains /manifest or ends in .json)
  • Try again in a few minutes — the server may be temporarily slow

The Gallery Builder reads metadata directly from each institution's IIIF manifest. If a field shows "No date returned" or similar, it means that institution hasn't included that information in their manifest — this is not something the Gallery Builder can fix.

Known cases:

  • Getty Museum: Often doesn't include creation dates in IIIF metadata
  • Some institutions: Use non-standard field names the Gallery Builder may not recognize

If you find a manifest where important metadata isn't displaying, let us know on GitHub and we'll look into adding support.

  • Make sure the link uses the raw Gist URL, not the Gist page URL
  • Wrong: https://gist.github.com/username/abc123
  • Right: https://gist.githubusercontent.com/username/abc123/raw/file.json
  • Check that the Gist is public, not secret
  • Try opening the raw URL directly — does it show JSON?
  • Try a hard refresh (Cmd+Shift+R or Ctrl+Shift+R) to clear the browser cache

This is a Canvas security setting, not a problem with the gallery. Options:

  • Ask your Canvas administrator to whitelist davidrumseymapcenter.github.io
  • Instead of embedding, link directly to the gallery URL and ask students to open it in a new tab
  • Use Canvas's Redirect Tool if available at your institution