← Back to Documentation

Creating Galleries

Galleries let you showcase multiple images together with unified navigation and styling. This guide covers creating, configuring, and customizing image galleries.

Gallery vs. Multiple Images

| Feature | Gallery Block | Multiple Image Blocks | |---------|--------------|----------------------| | Images | Multiple | One each | | Layout | Unified grid | Independent | | Lightbox | Grouped navigation | Individual | | Best for | Collections | Featured images |

Use galleries when images belong together conceptually.

Adding a Gallery

Create Gallery Block

  1. Press G or open the block palette
  2. Select Gallery
  3. Click to place on your canvas
  4. The gallery editor opens

Adding Images

  1. Click Add Images in the gallery
  2. Select multiple images (hold Ctrl/Cmd)
  3. Or drag and drop images directly
  4. Images appear in the gallery grid

Gallery Layouts

Grid Layout

A traditional grid of equal-sized thumbnails.

Settings:

  • Columns - Number of columns (2-6)
  • Gap - Space between images
  • Aspect ratio - Square, landscape, portrait, or original

Best for:

  • Uniform collections
  • Portfolio thumbnails
  • Product displays

Masonry Layout

Images maintain their aspect ratios in a Pinterest-style arrangement.

Settings:

  • Columns - Number of columns
  • Gap - Space between images

Best for:

  • Mixed orientations
  • Photography portfolios
  • Natural-looking grids

Slideshow Layout

One image at a time with navigation.

Settings:

  • Transition - Fade, slide, or zoom
  • Duration - Seconds per slide
  • Autoplay - Auto-advance on/off
  • Navigation - Arrows, dots, or both

Best for:

  • Featured work
  • Presentations
  • Hero galleries

Justified Layout

Images fill rows edge-to-edge with consistent row heights.

Settings:

  • Row height - Target height in pixels
  • Gap - Space between images
  • Last row - Justify, left-align, or hide

Best for:

  • Photo galleries
  • Professional photography
  • Clean, edge-to-edge look

Configuring Your Gallery

Reordering Images

Change image order:

  1. Click and drag images within the gallery
  2. Or use the gallery panel to reorder
  3. Number indicators show position

Removing Images

Remove images from gallery:

  1. Hover over an image
  2. Click the X button
  3. Or select and press Delete

Image is removed from gallery, not deleted from your library.

Image Settings

Click an image in the gallery to set:

  • Caption - Text shown below/over image
  • Alt text - Accessibility description
  • Link - Make image clickable
  • Focus point - Where to crop if needed

Lightbox Options

Enable Lightbox

Lightbox lets visitors view full-size images:

  1. Select the gallery
  2. Enable Lightbox in properties
  3. Click any image to test

Lightbox Behavior

| Setting | Options | |---------|---------| | Navigation | Arrows, keyboard, swipe | | Background | Dark, light, blurred | | Captions | Show in lightbox | | Zoom | Enable zoom on click | | Close | Button, click outside, escape |

Grouped Navigation

In lightbox mode:

  • Arrow keys navigate between images
  • Swipe on mobile moves through gallery
  • Counter shows position (3 of 12)

Gallery Styling

Overall Appearance

Style the entire gallery:

  • Border radius - Rounded corners for all images
  • Shadow - Drop shadow on images
  • Border - Border around each image
  • Hover effect - Zoom, fade, or slide on hover

Caption Styling

Configure captions:

  • Position - Below image, overlay, or hidden
  • Alignment - Left, center, right
  • Background - For overlay captions
  • Font - Matches your theme

Hover Effects

Available hover effects:

| Effect | Description | |--------|-------------| | Zoom | Image scales up slightly | | Brighten | Image becomes lighter | | Darken | Image becomes darker | | Caption reveal | Caption fades in | | Overlay | Color overlay appears |

Advanced Options

Lazy Loading

Galleries automatically lazy-load images:

  • Images load as they enter viewport
  • Improves initial page load
  • Reduces bandwidth usage

Responsive Behavior

Galleries adapt to screen size:

  • Desktop - Full column count
  • Tablet - Reduced columns
  • Mobile - 1-2 columns typically

Configure breakpoints in gallery settings.

Custom Aspect Ratios

For grid galleries, set aspect ratio:

| Ratio | Use Case | |-------|----------| | 1:1 | Square thumbnails | | 4:3 | Standard photo | | 16:9 | Widescreen | | 3:2 | Classic photo | | Original | Maintain proportions |

Gallery Templates

Portfolio Gallery

Recommended settings:

  • Layout: Masonry or Grid
  • Columns: 3-4
  • Hover: Zoom + caption reveal
  • Lightbox: Enabled

Photo Album

Recommended settings:

  • Layout: Justified
  • Row height: 200-300px
  • Gap: 4-8px
  • Lightbox: Enabled with captions

Product Showcase

Recommended settings:

  • Layout: Grid
  • Aspect ratio: Square
  • Columns: 3-4
  • Hover: Zoom
  • Links: To product pages

Tips for Great Galleries

  1. Consistent quality - Similar resolution and style
  2. Logical order - Tell a story or group by theme
  3. Right layout - Match layout to content type
  4. Caption wisely - Add value, don't repeat obvious
  5. Test lightbox - Ensure navigation works smoothly

Common Issues

Images different sizes

Solution: Use Masonry or Justified layout, or crop to consistent aspect ratio.

Gallery too slow

Solution: Optimize images before upload, reduce image count, or paginate.

Captions not showing

Solution: Enable captions in gallery settings and add text to each image.

Next Steps

Creating Galleries - Salon Docs