Gallery Block Quick Reference

    Three Display Styles

    🔲 Grid Layout

    Best for: Event photos, team photos, sponsor logos

    • 2, 3, or 4 columns (configurable)
    • Square images
    • Hover zoom + caption reveal
    • Click for enhanced lightbox

    🧩 Masonry Layout

    Best for: Mixed photo sizes, competition galleries

    • Natural image heights
    • Pinterest-style cascading
    • 1-3 columns (responsive)
    • Click for enhanced lightbox

    🎞️ Slideshow

    Best for: Hero galleries, feature highlights

    • Auto-play (optional, 3-10 seconds)
    • Previous/Next buttons
    • Slide indicators (dots)
    • Captions overlay
    • Keyboard navigation (arrow keys)
    • Pause on hover

    ✨ Cool Features

    🏷️ Tag Filtering

    • Tag images (e.g., "Jumping", "Dressage")
    • Filter buttons auto-generate from tags
    • Visitors click to show/hide categories

    📤 Social Sharing

    • Share to Facebook, Pinterest
    • Copy image link
    • Download high-res images
    • Web Share API on mobile

    📁 Photo Albums

    • Organize into collections
    • Tab selector to switch albums
    • Example: "Summer 2024", "Members"

    🔍 Zoom & Pan

    • Zoom in/out with controls
    • Mouse wheel zoom
    • Pinch-to-zoom on mobile
    • Drag to pan when zoomed

    ❤️ Favorites

    • Heart images to save
    • Stored in browser (no login)
    • "Show Favorites Only" filter

    👤 Photographer Credits

    • Show photo credits
    • Display on hover or in lightbox

    Adding Images

    1. Pick from Library - Select existing images
    2. Add by URL - Enter image URL manually
    3. Upload - Add new images to library

    Required Fields

    • ✅ Display Style - Choose layout type
    • ✅ Images - At least 1 image
    • ✅ Alt Text - For every image (accessibility)

    Optional Per-Image Fields

    • Caption - Shown on hover/lightbox
    • Tags - For filtering (comma-separated)
    • Album - Assign to album collection
    • Photographer - Photo credit

    Mobile Responsive

    • Mobile: All layouts adapt to 1 column
    • Tablet: Grid/Masonry use 2 columns
    • Desktop: Full layout as configured

    Accessibility ♿

    • Required alt text for screen readers
    • Keyboard navigation support
    • 44x44px touch targets on mobile
    • WCAG 2.1 AA compliant

    Quick Tips

    💡 Grid: Use 3 columns for best balance
    💡 Masonry: Works best with 8-15 images
    💡 Slideshow: Keep to 5-7 images max
    💡 Alt Text: Be specific, not generic
    💡 Captions: Keep under 2 lines
    💡 Tags: Use consistent naming (e.g., always "Jumping" not "jumping")
    💡 Albums: Great for organizing 20+ images
    💡 Sharing: Increases club visibility and marketing
    💡 Favorites: Helps identify most popular content

    Feature Combinations

    🏆 Best for Large Events:

    • Grid or Masonry layout
    • Enable Tag Filtering (by discipline)
    • Enable Favorites
    • Enable Social Sharing

    🎪 Best for Facility Tours:

    • Masonry layout
    • Photo Albums (Arenas, Stables, Amenities)
    • Enable Zoom & Pan
    • Photographer Credits

    📱 Best for Social Media:

    • Grid layout
    • Enable Social Sharing
    • Enable Download
    • High-quality images

    👥 Best for Member Galleries:

    • Grid layout (4 columns)
    • Enable Favorites
    • Enable Tag Filtering (by year/event)

    Image Recommendations

    • Size: 1200px+ width (1920px for slideshow)
    • Format: JPEG, PNG, or WebP
    • File Size: Under 500KB (compressed)
    • Aspect Ratio: Any (Grid makes square, Masonry preserves original)

    Keyboard Shortcuts

    • Tab - Navigate to controls
    • Enter/Space - Activate buttons
    • ←/→ - Previous/Next slide (slideshow)
    • Esc - Close lightbox
    • Mouse Wheel - Zoom in/out (when lightbox open)

    Mobile Features

    Published: