---
title: "CMS Masonry Lightbox"
canonical_url: "https://framerhub.io/components/cms-masonry-lightbox"
last_updated: "2026-06-15T14:46:29.031Z"
---

## Beautiful Masonry Galleries from Your CMS

Turn any CMS collection into a professional masonry gallery with lightbox preview and category filtering. Perfect for portfolios, product showcases, and media libraries.

Built for designers who need production-ready galleries without touching code.

## Features

**Auto-Adapting Masonry Layout**
Connect any CMS collection and watch it transform into a Pinterest-style masonry grid. Supports 1-12 columns with custom gap spacing.

**Built-In Lightbox**
Click any image or video to open an elegant full-screen lightbox. Automatically detects media types and handles both images and videos seamlessly.

**Smart Category Filtering**
Add filter pills that automatically sync with your CMS categories. Choose single-select or multi-select modes. Fully customizable pill colors, fonts, and spacing.

**Customizable Hover Effects**
Four hover animations (scale, fade, slide, bounce) with adjustable overlay colors, icons, and shadow intensity for polished interactions.

**Flexible Grid Control**
Adjust columns, gaps, and shadows from the properties panel. Everything responds instantly without code.

## Use Cases

**Portfolio Galleries** — Showcase design work with category filters that let visitors browse by project type

**Product Showcases** — Display product images with lightbox zoom for detailed views and filtering by category

**Photography Sites** — Create stunning image galleries with masonry layouts that adapt to different image sizes

**Case Study Libraries** — Organize client work with filterable categories and quick preview capabilities

**Media Archives** — Build searchable collections of images and videos with elegant lightbox playback

![CMS Masonry Lightbox Preview](/framerhub/img/components/control/cms-masonry-lightbox.jpg)

## How to Use

### Installation

After purchasing from FramerHub:

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find CMS Masonry Lightbox in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Setup

**Connect Your CMS**

1. Drag the component onto your canvas
2. In the properties panel, click "Connect CMS"
3. Select your CMS collection
4. The masonry layout appears automatically

**Configure Layout**

- Set your preferred number of columns (1-12)
- Adjust gap spacing between items
- Choose shadow intensity for depth

**Enable Lightbox** (optional)

- Toggle "Enable Lightbox" in the properties panel
- Specify your CMS image field name (default: "image")
- Specify your CMS video field name (default: "video")
- Customize hover effects and overlay styles

**Add Category Filtering** (optional)

1. Paste the CMSMasonboxFilter component above your gallery
2. Set the "Category Field" to match your CMS field name
3. Choose single or multi-select mode
4. Customize pill colors, fonts, and spacing

Both components automatically sync using a "Store Key"—no manual connection needed.

### Quick Tips

**Column Strategy** — Use 3-4 columns on desktop, 2 on tablet, 1 on mobile for best readability

**Field Names** — Make sure your image/video field names match exactly what you set in the properties panel

**Filter Setup** — If your CMS uses a different field name for categories, update both components to match

**Performance** — For large collections (90+ items), consider using CMS pagination limits

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Why Designers Love This

Connect your CMS and get a polished masonry gallery in seconds. No wrestling with layouts or writing filter logic—just paste, connect, and customize through Framer's properties panel.

Perfect for agencies building portfolio sites and freelancers delivering client galleries without custom development.

---