TemplateStandards
Media gallery pattern
Use split galleries by default when photos and videos should appear in distinct sections.
Example — split (default)
Photos are intentionally split from videos for parity with sites that use distinct sections.
Photos
Media note
Media shown here are examples and may include non-adoptable dogs. Use this optional notice for context/disclaimers.
Browse photos and videos, and open any image for a closer look.
Videos
Videos are rendered in their own gallery section.
Volunteer Day Recap
Short recap from the latest volunteer and enrichment day.
Foster Update
Progress update from a temporary foster placement.
Browse photos and videos, and open any image for a closer look.
Unified variant
Use unified mode when photos and videos should appear in one section instead.
Media gallery (unified variant)
Volunteer Day Recap
Short recap from the latest volunteer and enrichment day.
Foster Update
Progress update from a temporary foster placement.
Browse photos and videos, and open any image for a closer look.
Standard
- Use `SplitMediaGallerySection` when photos and videos must render in separate sections (default recommendation).
- Use `MediaGallerySection` for mixed photo and video sections when a unified gallery is desired.
- Keep media items in normalized arrays and pass them as props.
- Keep `showFilters` optional and default to user-friendly category groups.
- Core media visibility must not depend on JavaScript.
- Use optional photo lightbox as enhancement only, not as primary access path; navigation (prev/next controls + keyboard arrows) is part of the standard behavior.
- Optional page behaviors (shuffle, max photos/videos, info notice, social CTA) are module props.
- Empty-state copy is visible when no media items are provided (`items={"{[]}"}`).
- Defaults: `columns=3`, `showFilters=true`, `enablePhotoLightbox=true`, `shuffleOnLoad=false`.
- Component: `template/src/components/patterns/MediaGallerySection.tsx`
- Wrapper: `template/src/components/patterns/SplitMediaGallerySection.tsx`