Photography Gallery Setup

Structure

The gallery automatically displays all GIFs from /static/photography/fullsize/ (symlinked from your nimslo directory).

  • All photos are displayed in the gallery by default
  • Only photos with content pages are clickable - they link to their detail pages
  • Photos without content pages are still visible but not linked

Each photography entry is a markdown file in this directory that corresponds to a GIF.

Front Matter Fields

---
title: "photo title"
description: "short description (shown in gallery hover)"
date: 2025-01-15
draft: false
thumbnail: "/photography/thumbnails/photo-thumb.jpg"  # local thumbnail path
image: "/photography/fullsize/20.gif"  # local symlink path OR external url
caption: "optional caption"  # shown below full-size image
location: "optional location"  # shown in sidebar
camera: "optional camera info"  # shown in sidebar
---

Workflow

  1. Full-size GIFs: All wigglegram GIFs are symlinked from /Users/ian/WINTERMUTE/8_media/85_photography/wigglegrams/ into /static/photography/fullsize/. Reference them like:

    • /photography/fullsize/20.gif
    • /photography/fullsize/21.gif
    • /photography/fullsize/22.gif

  2. Create thumbnails: Generate smaller thumbnails (recommended: 400-600px width) and place them in /static/photography/thumbnails/

  3. Create entry: Create a new .md file in this directory with the front matter above

  4. Production note: For production, you might want to host the full-size GIFs externally (CDN, S3, etc.) to avoid serving 40-80MB files directly. For local dev, the symlinks work great.

Example

---
title: "sunset over city"
description: "16mm film, kodak vision3"
date: 2025-01-15
thumbnail: "/photography/thumbnails/sunset-thumb.jpg"
image: "https://cdn.spillyourguts.online/photography/sunset-full.gif"
caption: "shot on 16mm, kodak vision3 500t"
location: "brooklyn, ny"
camera: "bolex h16"
---

When you add new GIFs to your nimslo directory, regenerate the data file:

./scripts/update-photography-gifs.sh

Or manually:

find static/photography/fullsize -name "*.gif" -type l | \
    sed 's|static/photography/fullsize|/photography/fullsize|' | \
    sort | \
    jq -R -s 'split("\n") | map(select(length > 0))' > data/photography_gifs.json

Notes

  • All GIFs are displayed in the gallery automatically
  • Only GIFs with corresponding markdown files are clickable/linked
  • Thumbnails are lazy-loaded for performance
  • Full-size GIFs only load when viewing individual photos
  • Gallery uses a masonry brick-layered three-column layout
  • Navigation between photos is available on single photo pages

links