# How to create a gallery view for images in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build an image gallery in Bubble using a Repeating Group in grid layout with Image elements. Configure responsive columns, add a lightbox popup for full-size viewing on click, and implement lazy loading by limiting initial items and loading more on scroll. Use Bubble's Imgix integration to optimize image delivery with automatic resizing and compression.

## Create an Image Gallery in Bubble

This tutorial shows you how to build a responsive image gallery with grid layout, lightbox viewing, and performance optimization.

## Before you start

- A Bubble account with images stored in the database
- A Data Type with an image field
- Basic familiarity with Repeating Groups

## Step-by-step guide

### 1. Create the Gallery Grid

Add a Repeating Group with Type = your image Data Type (e.g., Photo). Set layout to 'Fixed number of columns' with 3-4 columns. Set cell minimum height. Data source: Search for Photos sorted by upload_date descending. Inside each cell, add an Image element mapped to Current cell's Photo's image.

**Expected result:** A responsive grid of images.

### 2. Add Lightbox Popup

Create a Popup element with Type = Photo. Inside, add a large Image element and navigation arrows. On gallery image click: Display data in Popup (Current cell's Photo) → Show Popup. Add Previous/Next buttons that navigate through the list.

**Expected result:** Clicking an image opens a full-size lightbox.

### 3. Optimize with Imgix Parameters

Bubble hosts images via Imgix. Append URL parameters for optimization: ?w=300&h=300&fit=crop for thumbnails, ?w=1200&q=80 for lightbox. Use dynamic expressions to modify the image URL.

**Expected result:** Thumbnails load fast with optimized dimensions.

### 4. Add Lazy Loading

Set the RG to show 12-20 items initially. Add infinite scroll or a Load More button using a Custom State for item count. Increase count on trigger.

**Expected result:** Gallery loads quickly with progressive image loading.

### 5. Add Upload and Management

Add an Upload button with File Uploader (accept images only). Workflow: Create Photo with image = uploader value, uploaded_by = Current User. Add delete buttons for owners.

**Expected result:** Users can upload images and manage their gallery.

## Complete code example

File: `Workflow summary`

```text
DATA TYPE:
- Photo: image (image), title (text), uploaded_by (User), upload_date (date), tags (list of texts)

PAGE: gallery
- RepeatingGroup Photos (3 columns, responsive)
  Source: Search for Photos (sorted by upload_date desc) :items until page's items_shown
  Cell: Image (Current cell's Photo's image), title overlay
- Popup Lightbox (Type: Photo)
  Image: Parent Popup's Photo's image (full size)
  Button Previous/Next for navigation
- Button Upload → File Uploader → Create Photo

IMAGE OPTIMIZATION:
- Thumbnails: append ?w=300&h=300&fit=crop to image URL
- Lightbox: append ?w=1200&q=80
- Use Bubble's built-in Imgix integration
```

## Common mistakes

- **Loading all images at full resolution in the grid** — Full-size images in a grid consume excessive bandwidth and slow page load dramatically. Fix: Use Imgix parameters to serve thumbnails (300x300px) in the grid and full-size only in the lightbox.
- **Not setting fixed cell heights in the grid** — Images of different aspect ratios create an uneven, messy grid layout. Fix: Set fixed cell height and use 'fit=crop' to ensure uniform thumbnails.
- **Loading hundreds of images at once** — Bubble renders all RG items in the DOM, causing browser memory issues with many high-res images. Fix: Paginate or use infinite scroll, limiting to 12-20 images per batch.

## Best practices

- Use Imgix URL parameters to serve optimized thumbnails.
- Set fixed cell dimensions for a uniform grid.
- Limit initial load to 12-20 images with pagination or infinite scroll.
- Add alt text for accessibility and SEO.
- Support multiple image formats (JPEG, PNG, WebP).
- Allow filtering by tags or categories.

## Frequently asked questions

### Can I add image filters or effects?

Not natively. Use Imgix URL parameters for basic adjustments (brightness, contrast, blur) or integrate a JavaScript image editor library.

### What is the maximum image file size?

Bubble allows uploads up to 50MB by default. For performance, recommend users upload images under 5MB and let Imgix handle resizing.

### Can I create album/folder organization?

Yes. Create an Album data type and link Photos to Albums. Filter the gallery by selected album.

### How do I add captions to gallery images?

Add a 'caption' text field to your Photo data type. Display it as an overlay at the bottom of each gallery cell and in the lightbox.

### Can I allow drag-and-drop reordering?

Bubble does not natively support drag-and-drop in Repeating Groups. Use a drag-and-drop plugin or add a sort_order field with up/down buttons. For advanced gallery features, RapidDev can build custom solutions.

### Does the gallery work on mobile?

Yes. Set the Repeating Group to reduce columns on smaller breakpoints (3 on desktop, 2 on tablet, 1 on mobile) using responsive settings.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-gallery-view-for-images-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-gallery-view-for-images-in-bubble