---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/fotogalerij'
title: 'Een fotogalerij bouwen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:01:14+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bouw je een fotogalerij: een gecentreerde kop, drie foto’s naast elkaar met alt-tekst, en een diashow op een grijze strook. Gebruik hem om een plek of een evenement in beelden te tonen. Om projecten elk met een beschrijving te tonen, volg je in plaats daarvan Een portfoliogalerij maken.
  De video bouwt een galerij met studentenschilderijen voor een universiteit.
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-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Een fotogalerij bouwen'
      description: |-
        Hier bouw je een fotogalerij: een gecentreerde kop, drie foto’s naast elkaar met alt-tekst, en een diashow op een grijze strook. Gebruik hem om een plek of een evenement in beelden te tonen. Om projecten elk met een beschrijving te tonen, volg je in plaats daarvan Een portfoliogalerij maken.
        De video bouwt een galerij met studentenschilderijen voor een universiteit.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:01:14+0000'
      dateModified: '2026-10-24T17:19:22+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/nl/hc/documentatie/dxpr-builder-leren/tutorials/fotogalerij'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/tutorials/fotogalerij'
      description: |-
        Hier bouw je een fotogalerij: een gecentreerde kop, drie foto’s naast elkaar met alt-tekst, en een diashow op een grijze strook. Gebruik hem om een plek of een evenement in beelden te tonen. Om projecten elk met een beschrijving te tonen, volg je in plaats daarvan Een portfoliogalerij maken.
        De video bouwt een galerij met studentenschilderijen voor een universiteit.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/nl/hc/documentation/learn-dxpr-builder/tutorials/overview) # Een fotogalerij bouwen.

 DXPR Builder lerenPagina’s bouwenVolg een tutorial

   ## In deze gids

 Gerelateerde gidsen

- [Een afbeelding toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeelding)
- [Een afbeeldingscarrousel toevoegen](/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeeldingscarrousel)
- [Een portfoliogalerij maken](/nl/hc/documentatie/dxpr-builder-leren/tutorials/portfoliogalerij)

Hier bouw je een fotogalerij: een gecentreerde kop, drie foto’s naast elkaar met alt-tekst, en een diashow op een grijze strook. Gebruik hem om een plek of een evenement in beelden te tonen. Om projecten elk met een beschrijving te tonen, volg je in plaats daarvan [Een portfoliogalerij maken](/nl/hc/documentatie/dxpr-builder-leren/tutorials/portfoliogalerij).

De video bouwt een galerij met studentenschilderijen voor een universiteit.

  ## Voordat je begint

- Je rol heeft de permissie **Bewerken met DXPR Builder**.
- De mediabibliotheek bevat minstens zes foto’s, bijgesneden tot dezelfde verhoudingen.
- De pagina is open in de builder. Ga voor een nieuwe naar **Inhoud** > **Inhoud toevoegen** > **Landingspagina** (`/node/add/landing_page`) en klik op **Opslaan**.

## Stap 1: de header toevoegen

1. Klik op **Add Elements** op de lege pagina en kies **Sectie** op het tabblad **Lay-out**.
2. Beweeg over de sectie en open **More** > **Settings**. Kies onder **HTML-klassen** de optie **Align text center**, en klik daarna op **Opslaan**.
3. Klik op **+** op de sectie en kies **Tekst** op het tabblad **Inhoud**.
4. Typ “Studentenkunstgalerij” als **Kop 2**, voeg één regel introductie toe en klik op **Opslaan**. Het thema drukt de paginatitel af als kop 1 van de pagina. Om in plaats daarvan deze kop kop 1 te maken, zie [SEO-vriendelijke pagina’s bouwen](/nl/hc/documentatie/dxpr-builder-leren/tutorials/seo#step-1-start-the-content-at-heading-2).

## Stap 2: het fotoraster toevoegen

1. Beweeg over de sectie en klik op **Sectie hieronder toevoegen**. Klik op **+** op de nieuwe sectie en kies **Rij**; deze komt met twee gelijke kolommen.
2. Klik op het rasterpictogram (**Kolomindeling**) van de rij, kies de preset **1/3 + 1/3 + 1/3** en klik op **Opslaan**.
3. Klik op **+** in de eerste kolom en kies **Afbeelding**.
4. Klik op **Afbeelding selecteren**, doorzoek de mediabibliotheek met **Filters toepassen**, klik op een foto en klik op **Geselecteerde invoegen**.
5. Open het paneel **SEO** en typ het **alt-attribuut**: wat iemand die de foto niet kan zien moet weten. Klik op **Opslaan**.
6. Herhaal voor de tweede en derde kolom.

Foto’s bijgesneden tot dezelfde verhoudingen houden de rij gelijk.

## Stap 3: de diashow toevoegen

1. Voeg een derde sectie toe met **Sectie hieronder toevoegen** en open **More** > **Settings**. Kies **Align text center** onder **HTML-klassen** en een lichtgrijze **Achtergrond** in het paneel **Stijl**. Klik op **Opslaan**.
2. Klik op **+** op de sectie en kies **Afbeeldingcarrousel**.
3. Klik op **Afbeelding selecteren**, doorzoek de bibliotheek, klik op drie foto’s en klik op **Geselecteerde invoegen**, en klik daarna op **Opslaan**.
4. Klik opnieuw op **+** op de sectie en kies **Tekst**; deze belandt boven de carrousel. Typ “Diashow” als **Kop 2** en klik op **Opslaan**.

## Stap 4: opslaan en vooraf bekijken

1. Klik op **Opslaan** op de werkbalk van de builder.
2. Open het weergavemenu (het **oogpictogram**) en kies **Voorvertoning**.

## Verder gaan

Niet getoond in de video:

- **Bijschriften**: zet een **Kaart** in de kolom en voeg er een **Tekst**-element met het bijschrift in toe. Voeg daarna de **Afbeelding** toe in de kaart; deze belandt boven het bijschrift.
- **Foto’s op ware grootte**: zet **Afbeeldingslink** op het bestand op ware grootte en **Doel van afbeeldingslink** op **Nieuw venster**.
- **Stijl**: zet bij elke afbeelding **Randradius** op 4 en **Slagschaduw** op 1 in het paneel **Stijl** voor een zachte lift.
- **Timing van de diashow**: stel **Interval** in op de carrousel, in milliseconden. Vink onder **Verbergen** **Paginabediening verbergen** of **Vorige-/volgendeknoppen verbergen** aan om die bediening te verwijderen.
- **Galerij die zichzelf vult**: maak bij **Structuur** > **Weergaven** > **View toevoegen** een view van Afbeeldingsmedia met een blokweergave in het formaat **Raster**. Voeg hem in op het tabblad **Drupal-views**, en nieuwe uploads verschijnen vanzelf.

## Wat je ziet

De gecentreerde kop opent de pagina, gevolgd door drie foto’s naast elkaar. Op de grijze strook eronder toont de diashow één foto tegelijk en gaat elke vijf seconden naar de volgende.

## Als je de foto’s niet ziet zoals getoond

- **Geselecteerde invoegen voegt geen foto toe.** De bibliotheek was nog aan het herladen na **Filters toepassen**, dus je klik vinkte de foto niet aan. Wacht tot het raster stilstaat, controleer dat de foto een vinkje toont, en klik opnieuw op **Geselecteerde invoegen**.
- **De mediabibliotheek is leeg.** Er zijn nog geen afbeeldingen geüpload, of de Mediabrowser is niet ingesteld. Zie [Afbeeldingen uploaden niet of verdwijnen](/nl/hc/documentatie/dxpr-builder-leren/probleemoplossing/afbeeldingen-en-media).
- **De drie foto’s hebben verschillende hoogtes.** De verhoudingen verschillen. Snijd ze bij tot dezelfde verhoudingen, upload ze opnieuw en kies de nieuwe exemplaren.
- **Je wijzigingen zijn weg na een herladen.** Je verliet de pagina voordat je op **Opslaan** op de werkbalk van de builder klikte. Als Opslaan een fout toont, zie [Wijzigingen worden niet opgeslagen](/nl/hc/documentatie/dxpr-builder-leren/probleemoplossing/opslaan-mislukt).

## Wat nu?

- [Afbeeldingselement](/nl/hc/documentation/learn-dxpr-builder/elements/image) voor elke afbeeldingsinstelling
- [Afbeeldingcarrousel-element](/nl/hc/documentation/learn-dxpr-builder/elements/image-carousel) voor diashowopties
- [Portfolio](/nl/hc/documentatie/dxpr-builder-leren/tutorials/portfoliogalerij) voor een projectraster met een filter