2026-02-14 10:30:27 +01:00
|
|
|
|
# ── Gallery Configuration ──────────────────────────────────────
|
|
|
|
|
|
# Define which Immich albums to publish and how to organize them.
|
|
|
|
|
|
#
|
|
|
|
|
|
# Find album UUIDs in Immich: Albums → click album → UUID in the URL bar.
|
|
|
|
|
|
# Find asset UUIDs: click a photo → UUID in the URL bar.
|
|
|
|
|
|
|
|
|
|
|
|
# Hero image(s) shown on the homepage (Immich asset UUIDs).
|
|
|
|
|
|
# Use a single UUID for a static image, or a list for a crossfade carousel.
|
|
|
|
|
|
hero: 00000000-0000-0000-0000-000000000000
|
|
|
|
|
|
# hero:
|
|
|
|
|
|
# - 00000000-0000-0000-0000-000000000000
|
|
|
|
|
|
# - 11111111-1111-1111-1111-111111111111
|
|
|
|
|
|
# - 22222222-2222-2222-2222-222222222222
|
|
|
|
|
|
|
|
|
|
|
|
# Standalone albums — shown directly on the homepage as cards
|
|
|
|
|
|
albums:
|
|
|
|
|
|
- 11111111-1111-1111-1111-111111111111
|
|
|
|
|
|
- 22222222-2222-2222-2222-222222222222
|
|
|
|
|
|
|
|
|
|
|
|
# Show camera/lens EXIF on photo hover (default: true)
|
|
|
|
|
|
# exifOnHover: false
|
|
|
|
|
|
|
|
|
|
|
|
# Photo grid layout — customize columns, gap, aspect ratio, and mode.
|
|
|
|
|
|
# grid:
|
|
|
|
|
|
# columns: 3 # default: 3
|
|
|
|
|
|
# gap: 12 # pixels, default: 12
|
|
|
|
|
|
# aspectRatio: "1" # "1", "3/2", "auto", etc. default: "1"
|
|
|
|
|
|
# layout: masonry # "masonry" or "uniform", default: "masonry"
|
|
|
|
|
|
|
|
|
|
|
|
# Subpages — group albums into collections at /subpage-slug/album-slug
|
|
|
|
|
|
subpages:
|
|
|
|
|
|
- name: Japan
|
|
|
|
|
|
grid: # override global grid for this subpage
|
|
|
|
|
|
columns: 4
|
|
|
|
|
|
layout: uniform
|
|
|
|
|
|
aspectRatio: "3/2"
|
|
|
|
|
|
albums:
|
|
|
|
|
|
- 33333333-3333-3333-3333-333333333333 # Tokyo
|
|
|
|
|
|
- 44444444-4444-4444-4444-444444444444 # Kyoto
|
|
|
|
|
|
|
|
|
|
|
|
- name: Wedding – Smith
|
|
|
|
|
|
password: clientpass123 # visitors must enter this to view
|
|
|
|
|
|
albums:
|
|
|
|
|
|
- 55555555-5555-5555-5555-555555555555
|
2026-02-14 11:47:26 +01:00
|
|
|
|
|
|
|
|
|
|
# Footer — optional minimal footer with social links
|
|
|
|
|
|
# footer:
|
|
|
|
|
|
# name: John Doe
|
|
|
|
|
|
# instagram: johndoe
|
|
|
|
|
|
# email: hello@example.com
|
|
|
|
|
|
# website: https://example.com
|
feat: theming system, documentation, and photo grid regression tests
- Add configurable theme system with 4 presets (studio, minimal, editorial, classic)
- Theme controls fonts, colors, accent, photo frames, grain, and header dot
- Resolve themes from gallery.yaml: string shorthand or full object override
- Inject theme as CSS custom properties on <html> element
- Dynamic Google Fonts loading based on theme config
- OG image route reads accent/background from theme
- Refactor Studio overrides into conditional CSS via data-attributes
Documentation:
- Add docs/gallery-config.md with comprehensive configuration reference
- Add docs/theming.md with preset reference and custom theme guide
- Slim README to link to detailed docs
Fix CSS regression:
- Fix passepartout frame overflow:visible breaking next/image fill rendering
- Remove duplicate .photo-grid__item block that stripped overflow:hidden
Testing:
- Add e2e/photo-grid.spec.ts with 3 regression tests:
- Grid items render with real dimensions
- overflow:hidden CSS guard (catches the exact bug fixed)
- Images load with real pixel data (not blurhash)
Tooling:
- Add scripts/screenshots.ts for automated theme screenshot generation
- Handles dev server lifecycle, theme cycling, FadeIn + lazy image handling
2026-02-15 12:21:02 +01:00
|
|
|
|
|
|
|
|
|
|
# ── Theme ─────────────────────────────────────────────────────
|
|
|
|
|
|
# Control the visual identity of your gallery. Use a preset name:
|
feat: restyle themes to be visually distinct
- Minimal: Swiss Brutalist — fullbleed hero, true B&W, zero-gap grid, Geist font
- Editorial: Cinematic Magazine — warm charcoal, Bodoni Moda serif, slow transitions
- Classic: Gilded Gallery — gold accents, Cinzel headings, passepartout, ornamental dividers
Updated config presets, per-theme color palettes, ~550 lines of scoped CSS overrides,
data-preset attribute on html element, responsive breakpoints, screenshots, and docs.
2026-02-15 17:17:25 +01:00
|
|
|
|
# theme: studio # Leica-inspired, red dot, passepartout frames, film grain
|
|
|
|
|
|
# theme: minimal # Swiss brutalist, fullbleed hero, true B&W, zero-gap grid
|
|
|
|
|
|
# theme: editorial # Cinematic magazine, warm charcoal, Bodoni serif, shadow frames
|
|
|
|
|
|
# theme: classic # Gilded gallery, gold accents, Cinzel headings, passepartout
|
feat: theming system, documentation, and photo grid regression tests
- Add configurable theme system with 4 presets (studio, minimal, editorial, classic)
- Theme controls fonts, colors, accent, photo frames, grain, and header dot
- Resolve themes from gallery.yaml: string shorthand or full object override
- Inject theme as CSS custom properties on <html> element
- Dynamic Google Fonts loading based on theme config
- OG image route reads accent/background from theme
- Refactor Studio overrides into conditional CSS via data-attributes
Documentation:
- Add docs/gallery-config.md with comprehensive configuration reference
- Add docs/theming.md with preset reference and custom theme guide
- Slim README to link to detailed docs
Fix CSS regression:
- Fix passepartout frame overflow:visible breaking next/image fill rendering
- Remove duplicate .photo-grid__item block that stripped overflow:hidden
Testing:
- Add e2e/photo-grid.spec.ts with 3 regression tests:
- Grid items render with real dimensions
- overflow:hidden CSS guard (catches the exact bug fixed)
- Images load with real pixel data (not blurhash)
Tooling:
- Add scripts/screenshots.ts for automated theme screenshot generation
- Handles dev server lifecycle, theme cycling, FadeIn + lazy image handling
2026-02-15 12:21:02 +01:00
|
|
|
|
#
|
|
|
|
|
|
# Or customize individual properties (defaults from the preset):
|
|
|
|
|
|
# theme:
|
|
|
|
|
|
# preset: studio # base preset to extend
|
|
|
|
|
|
# accent: "#2563eb" # brand/accent color
|
|
|
|
|
|
# fonts:
|
|
|
|
|
|
# heading: "Inter" # Google Fonts name for headings
|
|
|
|
|
|
# body: "Inter" # body text
|
|
|
|
|
|
# caption: "JetBrains Mono" # EXIF captions
|
|
|
|
|
|
# radius: 8 # border-radius in pixels (0 = sharp)
|
|
|
|
|
|
# photoFrame: none # "none" | "passepartout" | "shadow"
|
|
|
|
|
|
# grain: false # film grain overlay on photos
|
|
|
|
|
|
# headerDot: false # accent dot in the nav bar
|
|
|
|
|
|
# heroStyle: split # "split" | "fullbleed" | "minimal"
|