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 three are responsive and support dark mode.

    Before you choose a layout: Grid and Masonry support every feature. Three of the block's options — tag filtering, photo albums and favourites — don't work on the Slideshow: it shows one image at a time, so there's no list of images to filter and nowhere to hang a favourite heart. The editor greys those tick boxes out and hides the album controls when Slideshow is selected, so you can't switch on something that won't appear. Sharing, image download, photographer credits and zoom work on all three. See Features by Layout below.

    ✨ 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

    Feature Grid Masonry Slideshow
    Lightbox with zoom & pan ✅ ✅ ✅
    Captions ✅ ✅ ✅
    Tag filtering ✅ ✅ —
    Photo album tabs ✅ ✅ —
    Favourites ✅ ✅ —
    Social sharing ✅ ✅ ✅
    Image download ✅ ✅ ✅
    Photographer credit ✅ ✅ in the lightbox

    Grid Layout

    • Configurable columns (2, 3, or 4)
    • Square aspect ratio for consistent appearance
    • Hover effects with zoom, caption and photo-credit reveal
    • Click to open full-screen view with enhanced controls
    • Supports every feature in the table above — as does Masonry

    Masonry Layout

    • Natural image heights preserved
    • Pinterest-style cascading layout
    • Smooth hover effects, with captions and photo credits on hover
    • Tag filtering, photo album tabs and favourites, the same as Grid
    • Click to open the lightbox, with sharing, download and zoom
    • The Number of Columns setting doesn't apply — masonry is always 1 / 2 / 3 columns by 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
    • Click a slide for the lightbox, with sharing, download, zoom and the photo credit
    • No tag filtering, album tabs or favourites — a slideshow has no image list to filter

    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)
      • On the Slideshow, Enable Tag Filtering and Enable Favourites are greyed out and the album controls are hidden — the editor tells you why. Any values you already set are kept, so switching back to Grid or Masonry restores them.

    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

    Columns setting Phone Tablet Desktop
    2 columns 1 2 2
    3 columns (default) 1 2 3
    4 columns 2 3 4

    Note the 4-column grid: it stays at two columns on a phone rather than dropping to one, so the images are noticeably smaller there.

    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
    • Alt text is required on every image in the editor, so nothing ships without it

    Responsive Behaviour

    Mobile (< 640px)

    • Grid: 1 column — except a 4-column grid, which stays at 2
    • Masonry: 1 column
    • Slideshow: Full width, smaller controls

    Tablet (640px – 1024px)

    • Grid: 2 columns, or 3 for a 4-column grid
    • 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: Grid Layout or Masonry Layout — albums and downloads work on both
    • 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. Pick Masonry if you want the varied image heights — the album tabs and the download button work either way.

    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: uploads are capped at 5 MB per file (and 10 files at a time). Aim well below that — a few hundred KB per image keeps the page quick on a phone.

    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

    Related Documentation

    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-10-06 06:11:08 UTC

    Published:
    Store Page Template and Product CMS Blocks
    Pony Club & Organisation Membership Features