---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
title: 'Build an image gallery | DXPR'
author:
  name: docs-sync
  url: 'https://dxpr.com/users/docs-sync'
date: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Photo gallery with captions'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Build an image gallery'
      description: 'Photo gallery with captions'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T14:31:17+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
      articleSection: 'Follow a tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/tutorials/image-gallery'
      description: 'Photo gallery with captions'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Follow a tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Build an image gallery.

Photo gallery with captions

 Learn DXPR BuilderBuild pagesFollow a tutorial

   ## In this guide

 Related guides

- [Image](/hc/documentation/learn-dxpr-builder/elements/image)
- [Image Carousel](/hc/documentation/learn-dxpr-builder/elements/image-carousel)
- [Portfolio](/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery)

Here you build a photo gallery: a centred heading, three photos side by side with alt text, and a slideshow on a grey band. Use it to show a place or an event in pictures. To show projects with a description each, follow [Build a portfolio gallery](/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) instead.

The video builds a gallery of student paintings for a university.

  ## Before you start

- Your role has the **Edit with DXPR Builder** permission.
- The media library holds at least six photos, cropped to the same proportions.
- The page is open in the builder. For a new one, go to **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) and click **Save**.

## Step 1: add the header

1. Click **Add Elements** on the empty page and pick **Section** from the **Layout** tab.
2. Hover the section and open **More** > **Settings**. Under **HTML classes** pick **Align text center**, then click **Save**.
3. Click **+** on the section and pick **Text** from the **Content** tab.
4. Type "Student art gallery" as **Heading 2**, add one line of introduction and click **Save**. The theme prints the page title as the page's Heading 1. To make this heading the Heading 1 instead, see [Build SEO-friendly pages](/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Step 2: add the photo grid

1. Hover the section and click **Add Section Below**. Click **+** on the new section and pick **Row**; it arrives with two equal columns.
2. Click the row's grid icon (**Column layout**), pick the **1/3 + 1/3 + 1/3** preset and click **Save**.
3. Click **+** in the first column and pick **Image**.
4. Click **Select Image**, search the media library with **Apply filters**, click a photo and click **Insert selected**.
5. Open the **SEO** panel and type the **Alt attribute**: what someone who cannot see the photo should know. Click **Save**.
6. Repeat for the second and third column.

Photos cropped to the same proportions keep the row even.

## Step 3: add the slideshow

1. Add a third section with **Add Section Below** and open its **More** > **Settings**. Pick **Align text center** under **HTML classes** and a light grey **Background** in the **Style** panel. Click **Save**.
2. Click **+** on the section and pick **Image carousel**.
3. Click **Select Image**, search the library, click three photos and click **Insert selected**, then click **Save**.
4. Click **+** on the section again and pick **Text**; it lands above the carousel. Type "Slideshow" as **Heading 2** and click **Save**.

## Step 4: save and preview

1. Click **Save** on the builder toolbar.
2. Open the view menu (the **eye icon**) and choose **Preview**.

## Go further

Not shown in the video:

- **Captions**: put a **Card** in the column and add a **Text** element with the caption inside it. Then add the **Image** inside the card; it lands above the caption.
- **Full-size photos**: set **Image link** to the full-size file and **Image link target** to **New window**.
- **Style**: on each image, set **Border radius** to 4 and **Drop shadow** to 1 in the **Style** panel for a soft lift.
- **Slideshow timing**: set **Interval** on the carousel, in milliseconds. Under **Hide**, tick **Hide pagination control** or **Hide prev/next buttons** to remove those controls.
- **Gallery that fills itself**: at **Structure** > **Views** > **Add view**, create a view of Image media with a block display in the **Grid** format. Insert it from the **Drupal Views** tab, and new uploads appear on their own.

## What you see

The centred heading opens the page, followed by three photos side by side. On the grey band below, the slideshow shows one photo at a time and moves to the next every five seconds.

## If you don't see the photos as shown

- **Insert selected adds no photo.** The library was still reloading after **Apply filters**, so your click did not tick the photo. Wait until the grid settles, check that the photo shows a tick, and click **Insert selected** again.
- **The media library is empty.** No images are uploaded yet, or the media browser is not set up. See [Images do not upload or disappear](/hc/documentation/learn-dxpr-builder/troubleshooting/images-and-media).
- **The three photos have different heights.** Their proportions differ. Crop them to the same proportions, upload them again and pick the new copies.
- **Your changes are gone after a reload.** You left the page before clicking **Save** on the builder toolbar. If Save shows an error, see [Changes do not save](/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## What's next?

- [Image element](/hc/documentation/learn-dxpr-builder/elements/image) for every image setting
- [Image carousel element](/hc/documentation/learn-dxpr-builder/elements/image-carousel) for slideshow options
- [Portfolio](/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery) for a project grid with a filter