Skip to content

Build an image 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 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.

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.
  • 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.

What's next?

Something wrong or missing on this page? Report it or edit the page.