CMS Masonry Lightbox

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

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 (100+ items), consider using CMS pagination limits

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

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.