Gallery Block Feature Guide

    Overview

    The Gallery Block allows riding schools to display images in three different styles on their club website pages:

    1. Grid Layout — Classic grid of square images
    2. Masonry Layout — Pinterest-style staggered grid
    3. Slideshow — Auto-playing carousel with navigation

    All layouts are fully responsive, support dark mode, and meet WCAG 2.1 AA accessibility standards.

    ✨ Features

    🏷️ Image Tagging & Filtering

    • Tag images with categories (e.g., "Jumping", "Dressage", "Events", "Facility")
    • Visitors can filter the gallery by clicking tag buttons
    • Auto-generated filter buttons from image tags
    • Perfect for organising large photo collections

    📤 Social Sharing

    • Share images directly to Facebook and Pinterest
    • Copy link to clipboard for easy sharing
    • Web Share API support on mobile devices
    • Download high-resolution images
    • Helps increase club visibility and marketing reach

    📁 Photo Albums

    • Organise gallery into multiple albums/collections
    • Tab-based album selector
    • Example: "Summer Events 2024", "Members", "Facility Tour"
    • Switch between albums with one click
    • Each image can belong to one album

    🔍 Zoom & Pan

    • Click images to open an enhanced lightbox viewer
    • Zoom in/out controls with mouse wheel support
    • Pinch-to-zoom on mobile and tablets
    • Drag to pan when zoomed in
    • Perfect for showcasing details (horse conformation, tack, arena features)

    ❤️ Favourites

    • Visitors can "heart" their favourite images
    • Favourites saved in browser (no account needed)
    • Toggle "Show Favourites Only" filter
    • Great for engagement and identifying popular content

    👤 Photographer Credits

    • Add photographer name to each image
    • Credits display on hover (grid/masonry) or in lightbox
    • Professional presentation and proper attribution

    Features by Layout

    Grid Layout

    • Configurable columns (2, 3, or 4)
    • Square aspect ratio for consistent appearance
    • Hover effects with zoom and caption reveal
    • Click to open full-screen view with enhanced controls
    • Responsive: adapts to mobile (1 column), tablet (2 columns), desktop (2–4 columns)

    Masonry Layout

    • Natural image heights preserved
    • Pinterest-style cascading layout
    • Smooth hover effects
    • Click to open full-screen view
    • Responsive: 1–3 columns based on screen size

    Slideshow

    • Auto-play with configurable duration (3, 5, 7, or 10 seconds)
    • Previous/Next navigation buttons
    • Optional slide indicators (dots)
    • Optional captions overlay
    • Pause on hover
    • Keyboard navigation (arrow keys)
    • Responsive: scales to container width
    • 16:9 aspect ratio for consistent display

    How to Use

    Adding a Gallery Block

    1. Navigate to Site Pages

      • Go to: Organiser → Sites → Pages
      • Click "Create Page" or edit an existing page

    2. Add Gallery Block

      • Click "Add Block"
      • Select "Image Gallery" from the block type dropdown

    3. Configure Display Style

      • Choose from: Grid Layout, Masonry Layout, or Slideshow
      • Set additional options based on style selected

    4. Enable Features ✨

      • Toggle on the features you want:
        • Enable Tag Filtering — Show filter buttons for tags
        • Enable Social Sharing — Add share buttons in lightbox
        • Enable Image Download — Allow high-res downloads
        • Enable Favourites — Let visitors heart images
        • Enable Zoom & Pan — Enhanced lightbox with zoom (enabled by default)

    5. Create Albums (Optional)

      • Click "Add Album" to create a new album
      • Enter a display name — the Album ID is auto-generated as a URL-safe slug from the name (e.g. "Summer Events 2024" → summer-events-2024). You can override it with a custom ID.
      • Albums let visitors switch between different photo collections

    6. Add Images

      • From Library: Click "Pick from Library" to select existing images
        • A count badge on the button shows how many images are currently selected
        • Use Select All / Deselect All to quickly manage large libraries
        • Delete images from the library using the trash icon per thumbnail
        • Edit each image's alt text inline directly in the picker
      • By URL: Click "Add URL" to manually enter image URLs
      • Upload (Drag & Drop): Drag image files onto the upload zone or click to browse
        • Client-side validation checks file type (JPG, PNG, WebP, SVG) and enforces a 5 MB per-file limit before uploading — errors are shown per file
        • Each file shows a status icon: spinner while uploading, ✓ on success, ✗ on failure

    7. Configure Images

      • URL: Image location (required)
      • Alt Text: Accessibility description (required)
      • Caption: Optional text shown on hover (Grid/Masonry) or as overlay (Slideshow)
      • Tags: Comma-separated tags for filtering (e.g., "Jumping, Competition, 2024")
      • Album: Assign image to an album (if albums exist)
      • Photographer Credit: Optional photographer name for attribution

    8. Publish

      • Click "Save" to save the block
      • Publish the page to make it live

    Grid Layout Options

    Option Description Default
    Number of Columns 2, 3, or 4 columns on desktop 3
    Mobile Always 1 column Fixed
    Tablet Always 2 columns Fixed

    Best For:

    • Event galleries
    • Team photos
    • Sponsor logos
    • Facility showcases

    Masonry Layout Options

    Option Description Default
    Columns 1 (mobile), 2 (tablet), 3 (desktop) Fixed

    Best For:

    • Photo galleries with varying dimensions
    • Competition photos
    • Before/after transformations
    • Mixed portrait and landscape photos

    Slideshow Options

    Option Description Default
    Auto-play Automatically advance slides Off
    Slide Duration 3, 5, 7, or 10 seconds 5 seconds
    Show Indicators Display dot indicators On
    Show Captions Display captions on slides On

    Best For:

    • Hero galleries on landing pages
    • Feature highlights
    • Instructional sequences
    • Awards and achievements

    Keyboard Navigation:

    • Left Arrow: Previous slide
    • Right Arrow: Next slide

    Accessibility Features

    All gallery layouts include:

    • Alt Text: Required for all images (screen reader support)
    • Keyboard Navigation: Full keyboard access to all controls
    • Focus Indicators: Visible focus states for keyboard users
    • ARIA Labels: Proper labelling for assistive technologies
    • Colour Contrast: WCAG 2.1 AA compliant (4.5:1 minimum)
    • Touch Targets: 44×44px minimum size on mobile
    • Reduced Motion: Respects user preference for reduced motion

    Responsive Behaviour

    Mobile (< 640px)

    • Grid: 1 column
    • Masonry: 1 column
    • Slideshow: Full width, smaller controls

    Tablet (640px – 1024px)

    • Grid: 2 columns (or 3 for 4-column grids)
    • Masonry: 2 columns
    • Slideshow: Full width

    Desktop (> 1024px)

    • Grid: 2, 3, or 4 columns as configured
    • Masonry: 3 columns
    • Slideshow: Max 4xl width (896px)

    Dark Mode Support

    All gallery layouts automatically adapt to dark mode — background colours, text colours, image overlays, and controls all adjust for visibility.

    Performance

    • Lazy Loading: Images load only when needed
    • No External Dependencies: Pure JavaScript and CSS
    • Efficient Rendering: HTML generated server-side

    Examples

    Example 1: Competition Gallery with Filtering

    • Display Style: Grid Layout (3 columns)
    • Enable Tag Filtering: ✓, Enable Favourites: ✓, Enable Social Sharing: ✓
    • 20 competition photos tagged with "Jumping", "Dressage", "Show Jumping", "Eventing"

    Result: Visitors can filter by discipline, heart their favourites, and share on social media.

    Example 2: Multi-Album Facility Tour

    • Display Style: Masonry Layout
    • Photo Albums: 3 albums (Arenas, Stables, Amenities), Enable Zoom & Pan: ✓, Enable Download: ✓
    • 30 facility photos organised into albums

    Result: Visitors can switch between facility areas and zoom in to see details.

    Example 3: Landing Page Hero (Slideshow)

    • Display Style: Slideshow, Auto-play: Yes, Slide Duration: 7 seconds, Show Indicators: Yes, Show Captions: Yes
    • 5 hero images with captions

    Result: Auto-playing slideshow with navigation, indicators, and captions.

    Best Practices

    Image Selection

    • Consistent Quality: Use similar quality images in a gallery
    • Appropriate Size: 1200px width minimum for grid/masonry, 1920px for slideshow
    • File Format: JPEG for photos, PNG for graphics, WebP for optimal performance
    • File Size: Keep under 500KB per image (use compression)

    Alt Text Guidelines

    • Be descriptive and specific
    • Don't start with "Image of..." or "Picture of..."
    • Include relevant context
    • Keep under 125 characters

    Good Examples:

    • "Students practising dressage in outdoor arena"
    • "Bay horse jumping over a red and white oxer"
    • "Instructor demonstrating proper riding posture"

    Bad Examples:

    • "Image 1" / "Horse" / "IMG_2023.jpg"

    Caption Usage

    • Keep captions concise (1–2 lines)
    • Add context or call attention to details
    • Optional but recommended for storytelling

    Gallery Size

    • Grid/Masonry: 6–20 images per gallery
    • Slideshow: 3–8 images per slideshow
    • Consider page load time for large galleries

    Troubleshooting

    Images Not Displaying

    • Verify image URLs are accessible
    • Check image file format (JPG, PNG, WebP, SVG supported)
    • Ensure images are properly uploaded to the organisation library

    Slideshow Not Auto-Playing

    • Check "Auto-play" checkbox is enabled
    • Verify JavaScript is enabled in browser

    Accessibility Issues

    • Ensure all images have alt text
    • Test with keyboard navigation (Tab, Arrow keys)
    • Verify focus indicators are visible

    Support

    For additional help or to report issues, contact support through the platform or check the Horsify documentation wiki.\n\n---\n\nSource: wiki/features/GALLERY_BLOCK_GUIDE.md \nLast synced: 2026-09-07 11:48:30 UTC

    Published: