Skip to content

Filterable Gallery

The Filterable Gallery module displays images in a customizable grid that visitors can filter by category with smooth, no-reload transitions — ideal for portfolios, product galleries, and project showcases.

  1. Add a section and row, then add the Filterable Gallery module.
  2. Under Items, add each gallery item — its image, title, description, and one or more filters.
  3. Configure the filter bar and pagination, then style the overlay and captions.

Content

Items

  • Each Item has an Image, Title, Description, and the Filters it belongs to.

Filters

  • Hide Filters — hide the whole filter bar.
  • Hide "All" filter and Text For "All" filter.
  • Show Pagination — page through large galleries.

Design

Overlay & Caption

  • Overlay Color and Opacity shown on image hover.
  • Hide Caption, Hide Title, and Hide Description, plus Title and Description text styling.

Filter Bar & Pagination

  • Alignment, Background Color, Active Background Color, Filter Spacing, and Filter Padding.
  • Pager Alignment, normal/active background, text and border colors, padding, and spacing.

Tip

Assign each item multiple filters (e.g. "Branding" and "Web") so it appears under several categories — the gallery animates items in and out as visitors switch filters.