Gallery Block

Display a collection of images in grid, carousel, or masonry layouts.

Content Block

Preview

Grid Layout (3 columns)

Uniform grid of images

Group training session

Controlled sparring

One-on-one coaching

Professional equipment

Spacious training area

Warm-up and stretching

Carousel Layout

Horizontally scrollable gallery

Group training session

Controlled sparring

One-on-one coaching

Professional equipment

Spacious training area

Warm-up and stretching

Masonry Layout

Pinterest-style layout

Group training session

Controlled sparring

One-on-one coaching

Professional equipment

2-Column Grid

Larger images in fewer columns

Group training session

Controlled sparring

One-on-one coaching

Professional equipment

Properties

Property	Type	Default	Description
images	GalleryImage[]	[]	Array of images to display
layout	'grid' | 'carousel' | 'masonry'	'grid'	Display layout
columns	2 | 3 | 4	3	Number of columns (grid layout)

GalleryImage

interface GalleryImage {
  url: string
  alt?: string
  caption?: string
}

Usage

<GalleryBlock
  content={{
    images: [
      { url: '/images/photo1.jpg', alt: 'Training session', caption: 'Morning class' },
      { url: '/images/photo2.jpg', alt: 'Gym equipment' },
      { url: '/images/photo3.jpg', alt: 'Team photo', caption: 'Our instructors' },
    ],
    layout: 'grid',
    columns: 3,
  }}
/>

Best Practices

• Optimize images - Compress images for faster loading
• Add alt text - Important for accessibility and SEO
• Use captions sparingly - Only when context is needed
• Match aspect ratios - Grid looks best with consistent image sizes
• Use carousel for many images - Keeps page length manageable