Gallery JSON API Examples

Example 1: Basic Gallery with Filter

A complete gallery with category filtering and lightbox. Click any image to open the lightbox viewer.

RSL.JSONLayout.renderLayout('#gallery-container', {
    version: 2,
    layoutId: "photo-gallery",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "gallery",
            id: "nature-gallery",
            showFilter: true,
            showLightbox: true,
            items: [
                {
                    src: "https://picsum.photos/400/300?random=1",
                    href: "https://picsum.photos/800/600?random=1",
                    alt: "Mountain landscape at sunrise",
                    title: "Mountain Sunrise",
                    meta: "Nature Photography",
                    category: "nature"
                },
                {
                    src: "https://picsum.photos/400/300?random=2",
                    href: "https://picsum.photos/800/600?random=2",
                    alt: "Modern city architecture",
                    title: "City Architecture",
                    meta: "Urban Photography",
                    category: "urban"
                },
                // ... more items
            ]
        }
    }]
});

Auto-Generated Features

The Gallery component automatically creates filter buttons from item categories, generates a lightbox modal, and handles all accessibility features including keyboard navigation and screen reader announcements.

Example 2: Simple Gallery (No Filter)

A minimal gallery without filtering, perfect for showcasing a single collection.

RSL.JSONLayout.renderLayout('#gallery-container', {
    version: 2,
    layoutId: "simple-gallery",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "gallery",
            showFilter: false,  // No category filter
            showLightbox: true,
            items: [
                {
                    src: "https://picsum.photos/400/300?random=10",
                    href: "https://picsum.photos/800/600?random=10",
                    alt: "Sample photo 1",
                    title: "Photo 1"
                },
                {
                    src: "https://picsum.photos/400/300?random=11",
                    href: "https://picsum.photos/800/600?random=11",
                    alt: "Sample photo 2",
                    title: "Photo 2"
                }
            ]
        }
    }]
});

Example 3: Gallery with Tall and Wide Items

Use size modifiers to create visual interest with tall and wide gallery items.

RSL.JSONLayout.renderLayout('#gallery-container', {
    version: 2,
    layoutId: "sized-gallery",
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "gallery",
            showFilter: true,
            items: [
                {
                    src: "https://picsum.photos/400/600?random=20",
                    href: "https://picsum.photos/800/1200?random=20",
                    alt: "Tall portrait image",
                    title: "Portrait Shot",
                    meta: "Portrait",
                    category: "portrait",
                    size: "tall"  // Spans 2 rows
                },
                {
                    src: "https://picsum.photos/600/300?random=21",
                    href: "https://picsum.photos/1200/600?random=21",
                    alt: "Wide panorama image",
                    title: "Panorama View",
                    meta: "Landscape",
                    category: "landscape",
                    size: "wide"  // Spans 2 columns
                }
            ]
        }
    }]
});

Size Options

tall - Item spans 2 rows, ideal for portrait photos. wide - Item spans 2 columns, perfect for panoramas. Leave size undefined for standard 1x1 items.

Gallery API Reference

Complete configuration options for the Gallery content type.

Property	Type	Default	Description
`items`	Array	Required	Array of gallery item objects
`showFilter`	Boolean	true	Show category filter buttons
`showLightbox`	Boolean	true	Enable lightbox modal viewer
`categories`	Array	Auto-detected	Explicit category list for filter buttons
`id`	String	Auto-generated	Unique ID for the gallery instance

Item Properties

Property	Type	Required	Description
`src`	String	Yes	Thumbnail image URL
`href`	String	No	Full-size image URL for lightbox (defaults to src)
`alt`	String	Yes	Alt text for accessibility
`title`	String	No	Image title (shown on hover and in lightbox)
`meta`	String	No	Meta text (category, date, etc.)
`category`	String	No	Category for filtering
`size`	String	No	"tall" or "wide" for spanning items