PhotoGallery

Embeddable photo galleries for the Theodore Roosevelt Presidential Library.

Drop a folder of full-resolution photos into galleries/, run one script, and get a fast masonry gallery you can embed on any website with two lines of HTML. Clicking a thumbnail opens a full-screen lightbox with a web-optimized image.

Embed a gallery

<div data-gallery="july1"></div>
<script src="https://photogallery.labs.trlibrary.com/embed.js"></script>

Change july1 to the name of any gallery folder.
Put multiple <div data-gallery="…"> blocks on one page; include the <script> once.
No dependencies, no build step on the host page. All styling is self-contained and namespaced (.trplpg-*) so it won’t clash with the surrounding site.

Adding a new gallery

Create a folder of full-resolution photos: galleries/<name>/ (e.g. galleries/august-rally/).

Generate the web-optimized versions and manifest:

pip install Pillow      # one time
python3 build.py        # process every gallery (skips images already built)
# or target one:  python3 build.py august-rally

Commit and push. GitHub Pages serves the new gallery automatically.
Embed it with <div data-gallery="august-rally"></div>.

build.py is idempotent — it only processes images it hasn’t built yet. Use --force to rebuild everything (e.g. after changing size/quality settings).

How it works

galleries/<name>/            full-resolution originals (kept in repo, NOT served to visitors)
docs/                        published by GitHub Pages
  embed.js                   the gallery engine
  index.html                 demo page listing galleries
  galleries/<name>/
    thumbs/<id>.jpg          small masonry thumbnails (~55 KB each)
    web/<id>.jpg             web-optimized lightbox images (longest side 2048px)
    manifest.json            image list + dimensions, read by embed.js

The grid loads only lazy thumbnails; the larger web image is fetched when a photo is opened. For the July 1 gallery this took ~926 MB of originals down to ~5.6 MB of thumbnails plus ~41 MB of on-demand lightbox images.

Sizes and quality are configurable at the top of build.py (THUMB_WIDTH, WEB_MAX_SIDE, quality values).

GitHub Pages setup (one time)

In the repo: Settings → Pages → Build and deployment → Source: Deploy from a branch, then select branch main and folder /docs. Save.

The site is served at the custom domain https://photogallery.labs.trlibrary.com (configured via docs/CNAME). Set a DNS CNAME record for photogallery.labs.trlibrary.com pointing to theodore-roosevelt-presidential-library.github.io, and enable Enforce HTTPS in the Pages settings once the certificate is issued.

embed.js detects its own URL automatically, so if you ever move the files, the same embed snippet keeps working — just point the <script src> at wherever you host it.