Gallery

Gallery Modes

Before starting, identify the gallery's organizational mode:

Most travel/event galleries are Series.

Architecture

Atomic Scripts (reusable):
├── init-gallery-manifest.ts    Create manifest from EXIF
├── merge-gallery-batches.ts    Combine batch files
├── validate-gallery-manifest.ts Fix common errors
└── generate-gallery-files.ts   Generate .astro pages

Sub-Agent Skill:
└── review-image-batch          AI reviews images → batch-NN.json

Workflow

Phase 1: Initialize

bun scripts/init-gallery-manifest.ts {folder} "{title}" {slug}

Creates:

• src/data/gallery-manifests/{folder}.json (images array, empty blocks)
• /tmp/gallery-batches/{folder}/ (clean directory for batch files)

Phase 2: Batch Review

Spawn sub-agents to review images. Each writes to its own file (parallel-safe).

For batchIndex in 0..ceil(imageCount/8):
  Task(
    subagent_type: "general-purpose",
    description: "Review gallery batch {batchIndex}",
    prompt: <see below>
  )

Sub-agent prompt template:

Review batch {batchIndex} for {folder} gallery.

Read:
- Manifest: src/data/gallery-manifests/{folder}.json
- Layout guide: {plugin_base_dir}/skills/review-image-batch/references/layout-guide.md
  (The plugin base directory is provided in the skill invocation header)

Images to review: indices {startImage} to {endImage}
(Calculate: startImage = batchIndex * 8, endImage = min(startImage + 7, totalImages - 1))

Workflow:
1. Read manifest to get image filenames
2. Read layout guide for rules
3. View each image file with Read tool
4. Create layout blocks using your visual judgment
5. Write JSON to: /tmp/gallery-batches/{folder}/batch-{NN}.json
   where NN = batchIndex padded to 2 digits (00, 01, 02...)
6. Return TEXT SUMMARY ONLY

Output file format:
{
  "batchIndex": {batchIndex},
  "startImage": {startImage},
  "endImage": {endImage},
  "blocks": [
    { "layout": "WideImage", "images": ["DSCF1234.jpeg"], "props": {}, "notes": "..." }
  ]
}

LAYOUT PHILOSOPHY:
Apply visual judgment, not mechanical rules. A gallery needs rhythm and variety.

Single-image (WideImage, OffsetImage, InsetImage, FullBleed):
- Strong standalones, portraits, quiet moments

Multi-image (TwoUp, ThreeUp):
- Use when juxtaposition creates meaning beyond either image alone
- Apply Lyons's test: Temporal? Spatial? Formal echo? Emotional pairing? Transformation?
- A good TwoUp is BETTER than two mediocre WideImages
- A true sequence (entering→through→emerging) deserves ThreeUp

Spacer: Add breathing room after powerful images
Chapter: Insert at location/theme changes

Parallel execution: Sub-agents can run in parallel since each writes to its own file.

Phase 3: Merge & Validate

After all batches complete:

bun scripts/merge-gallery-batches.ts {folder}
bun scripts/validate-gallery-manifest.ts src/data/gallery-manifests/{folder}.json

This combines all batch files and validates the result.

Phase 4: Global Arc Review (NEW)

Before generating, review the merged manifest for overall coherence:

1. Count hero moments — If >4 FullBleeds, demote some to WideImage
2. Check multi-image limits — Max 2-3 TwoUp, 1-2 ThreeUp across entire gallery
3. Verify rhythm — No consecutive high-weight blocks
4. Identify the climax — One clear emotional peak, not many
5. Working backwards — Does the final image provide satisfying closure?

Phase 5: Generate

bun scripts/generate-gallery-files.ts {folder}

Creates:

• src/data/{folder}.ts (data file with chapters)
• src/pages/photographing/{slug}/index.astro
• Additional .astro files for each chapter (if multi-chapter)

Resume Protocol

If interrupted, check /tmp/gallery-batches/{folder}/ for existing batch files:

ls /tmp/gallery-batches/{folder}/

Only run missing batches, then merge.

Layout Philosophy

A gallery needs rhythm and variety — loud moments, quiet moments, pairings that create meaning.

Lyons's Juxtaposition Test

Pair images when juxtaposition creates meaning beyond either image alone:

1. Temporal — Same moment, different angles
2. Spatial — Same scene, complementary views
3. Formal echo — Compositional rhyme (lines, shapes, colors)
4. Emotional — Contrast or reinforcement
5. Transformation — Together they say something neither says alone

A strong TwoUp is better than two mediocre WideImages.

Output

When complete:

• Gallery URL: /photographing/{slug}/
• Files:
  • src/data/gallery-manifests/{folder}.json
  • src/data/{folder}.ts
  • src/pages/photographing/{slug}/*.astro

Composability

Each piece is reusable:

# Just extract EXIF
bun scripts/init-gallery-manifest.ts photos "Photos" photos

# Just merge existing batches
bun scripts/merge-gallery-batches.ts photos

# Just regenerate pages from manifest
bun scripts/generate-gallery-files.ts photos

# Validate any manifest
bun scripts/validate-gallery-manifest.ts src/data/gallery-manifests/photos.json