Een fotogalerij bouwen.

DXPR Builder lerenPagina’s bouwenVolg een tutorial

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.

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.

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

Wat nu?