Hoe maak je snel en eenvoudig een fotogalerij in WordPress

Leestijd: 10 minuten

Hoe maak je snel en eenvoudig een fotogalerij in WordPressDeze handleiding laat je stap voor stap zien hoe je een standaard WordPress fotogalerij toevoegt aan een WordPress pagina of bericht.

Eén van de beste en meest eenvoudige manieren om je website op te vrolijken, je producten eruit te laten springen, en bezoekers op je website te houden, is het toevoegen van mooie, bijpassende afbeeldingen aan je berichten en pagina’s.

Wil je een hele serie foto’s op die pagina laten zien, dan maakt WordPress het je heel gemakkelijk om een goed uitziende fotogalerij op je site te zetten.

Je kunt gebruik maken van de vele gratis en betaalde fotogalerij-plugins die beschikbaar zijn, maar voor de meeste websites is zo’n galerij-plugin helemaal niet nodig. Het zijn meestal zware plugins die veel extra druk leggen op de snelheid van je website.

Wat zijn WordPress [shortcodes]

Shortcodes zijn (meestal) kleine stukjes programmacode die je kunt gebruiken in je pagina’s, berichten, of widgets.

Je kunt:

Eén van de ingebouwde shortcodes voegt een fotogalerij toe aan je post of pagina.

WordPress biedt gelukkig een geweldige, ingebouwde shortcode die een eenvoudige fotogalerij in de pagina of post zet.

Hoe gebruik je de WordPress [gallery] shortcode

De shortcode voor het toevoegen van een fotogalerij aan je WordPress pagina of post is [gallery].

Zet je deze shortcode gewoon in je pagina, dan wordt er niets getoond. De reden hiervoor is dat de shortcode – in principe – alleen afbeeldingen laat zien die aan die specifieke pagina zijn gekoppeld.

Dus is de vraag: hoe moet je nu je foto’s aan de pagina koppelen zodat je ze kunt laten zien in een fotogalerij?

Ik zal je stap voor stap laten zien hoe je afbeeldingen aan je pagina of bericht koppelt, en hoe je een eenvoudige fotogalerij in de pagina zet.

Maak je geen zorgen als je ergens een foutje in een stap maakt, alle instellingen kunnen achteraf nog worden veranderd.

  1. Log in op het dashboard van de website.

  2. Open de pagina of het bericht waar je de galerij in wilt zetten, of maak een nieuwe pagina of bericht.

  3. Klik op de Media toevoegen button in de linkerbovenhoek van de editor (tekstverwerker): Media toevoegen button in WordPress

  4. Dit opent scherm Media toevoegen. Klik op de link Galerij aanmaken in het linker zijmenu. Je kunt dit ook doen nadat je de foto’s hebt toegevoegd, maar ik doe dit liever meteen:

    Galerij aanmaken scherm in WordPress

  5. Je kunt afbeeldingen aan de pagina toevoegen door:

    • met je muis één of meerdere afbeeldingen op je computer te selecteren en deze te slepen naar dit scherm en ze hier los te laten (drag en drop).

    • te klikken op de Bestanden selecteren button, en dan met behulp van het bestandsbeheer één of meerdere afbeeldingen te selecteren.

    • reeds aan de site toegevoegde afbeeldingen te selecteren in de Mediabibliotheek.

  6. Wanneer je de afbeeldingen (hoe vind je mijn draken?) naar het scherm hebt gesleept, of hebt geselecteerd met de Bestanden selecteren button, worden ze vanzelf naar de server geladen.

    Zodra een afbeelding klaar is met laden zie je de thumbnail (miniatuurafbeelding) van die afbeelding. Bij de afbeeldingen die bezig zijn met laden zie je een voortgangsbalk tot ze helemaal zijn geladen:

    Afbeeldingen uploaden naar WordPress pagina of bericht

  7. Wanneer alle afbeeldingen naar de server zijn geladen zijn ze automatisch gekoppeld aan deze pagina, en zijn ze ook automatisch allemaal geselecteerd om in de galerij te worden getoond. De geselecteerde afbeeldingen herken je aan het vinkje in de rechterbovenhoek van de thumbnail:

    Afbeeldingen geselecteerd voor opname in de WordPress fotogalerij

    Je kunt de selectie wijzigen door met je linkermuisknop dubbel te klikken op de afbeeldingen die je niet wilt laten zien in de galerij. Dit zorgt ervoor dat het vinkje bij die afbeelding verdwijnt.

  8. Klik je per ongeluk te vaak op een afbeelding, dan worden alle overige afbeeldingen gedeselecteerd. Je kunt de afbeeldingen weer selecteren door te klikken op één van de afbeeldingen, en dan de Shift toets ingedrukt te houden terwijl je de andere afbeeldingen die je in de galerij wilt opnemen selecteert.

    Je ziet de geselecteerde afbeeldingen ook als miniaturen aan de onderzijde van het scherm:

    Overzicht geselecteerde afbeeldingen in WordPress

  9. Om er nu voor te zorgen dat je het overzicht niet kwijtraakt wanneer je veel afbeeldingen op de site hebt staan, én om ervoor te zorgen dat de afbeeldingen en pagina’s beter gevonden worden in de zoekmachines, is het een goede gewoonte om alle afbeeldingen op je site de juiste gegevens mee te geven.

    De afbeeldingsgegevens of bijlagedetails worden zichtbaar in de grijze rechter-zijbalk wanneer je een afbeelding selecteert door erop te klikken (het vakje met het vinkje wordt dan blauw):

    Aanpassen afbeeldingsgegevens in WordPress

    Je kunt voor elke afbeelding de volgende gegevens invullen:

    • titel
      De titel is een korte omschrijving van de afbeelding. De titel is ook de tekst die je ziet wanneer je met je muis over de afbeelding beweegt op je site. Standaard staat hier de bestandsnaam ingevuld, maar je kunt de afbeelding beter een goede beschrijvende naam verzinnen die de afbeelding verduidelijkt voor de bezoeker van je site én de zoekmachines.

    • onderschrift
      Het onderschrift is een verduidelijkende tekst onder de afbeelding. Wil je geen onderschrift laten zien, dan moet je hier geen tekst in zetten.

    • alt-tekst
      De alt-tekst of alternatieve tekst wordt getoond wanneer iemand de browser zo heeft ingesteld dat deze geen afbeeldingen laat zien. De alt-tekst wordt ook gebruikt als omschrijving van de afbeeldingen in “text-to-speech” programma’s die webpagina’s voorlezen aan blinde en slechtziende mensen.

    • beschrijving
      De beschrijving van de afbeelding is alleen voor jezelf. Hierin kun je een grote beschrijving kwijt, of andere gegevens. Veel mensen vullen dit veld niet in, maar het kan je helpen overzicht te houden in je mediabibliotheek.

    Het kost je wat tijd om alle gegevens voor elke afbeelding in te vullen, maar het maakt je site professioneler, en het zorgt ervoor dat je overzicht houdt.

  10. Klik op de Een nieuwe galerij aanmaken knop om de galerij aan te maken: Een nieuwe galerij aanmaken button in WordPress

  11. De nieuwe fotogalerij is nu wel gemaakt, maar is nog niet in de pagina gezet. Eerst kun je de galerij nog verder instellen in het Galerij bewerken scherm:

    Galerij bewerken scherm in WordPress

  12. In het Galerij bewerken scherm kun je:
    • De volgorde van de afbeeldingen in de galerij wijzigen door de afbeeldingen met behulp van je muis te slepen en neer te zetten (drag en drop, zie de afbeelding).
    • De volgorde van de afbeeldingen in de galerij omdraaien door op de Volgorde omkeren button te klikken.
    • Afbeeldingen uit de galerij verwijderen door een afbeelding te selecteren en op de X button te klikken
    • Afbeelding aan de galerij toevoegen door op de Aan de galerij toevoegen link te klikken. Dit brengt je naar het Aan de galerij toevoegen scherm, waar je afbeeldingen kunt toevoegen door ze naar de site te slepen, de afbeeldingen te uploaden, of door ze te selecteren in de Mediabibliotheek.
    • De instellingen van de galerij wijzigen.
  13. De galerij-instellingen kun je wijzigen in de grijze balk aan de rechterzijde van het scherm. Er zijn drie instellingen die je kunt wijzigen:

    • Link naar
      Deze optie bepaalt of de afbeeldingen wel of niet zijn gelinkt aan de originelen, en hoe dit wordt gedaan.

      Galerijinstellingen in WordPress: Link naar

      De opties zijn:

      • Bijlagepagina
        Klikt de bezoeker op een afbeelding in de galerij, dan wordt er een bijlagepagina geopend waar de originele afbeelding op middelgroot formaat wordt getoond:

        Galerij bijlagepagina in WordPress

        Klikt de bezoeker op de afbeelding in de bijlagepagina, dan wordt het mediabestand geopend.

      • Mediabestand
        Klikt de bezoeker op een afbeelding in de galerij, dan wordt de originele afbeelding getoond in een scherm met een zwarte achtergrond:

        Galerij mediabestand in WordPress

      • Geen
        De galerijafbeeldingen zijn niet gekoppeld aan de originele afbeeldingen, er gebeurt niets wanneer een afbeelding wordt aangeklikt.

      De standaard WordPress software geeft je geen mogelijkheid de originele afbeeldingen te openen in een lightboxes. Voor het lightbox-effect van de afbeelding hierboven gebruik ik jQuery Colorbox.

    • Kolommen
      Deze instelling bepaalt het aantal kolommen die worden weergegeven in de galerij, oftewel het aantal afbeeldingen die naast elkaar worden getoond. Je kunt 1 tot maximaal 9 kolommen met afbeeldingen naast elkaar laten zien in je fotogalerij. Standaard laat de galerij drie afbeeldingen naast elkaar zien:

      Galerijinstellingen in WordPress: Aantal kolommen in de fotogalerij

      Je kunt het best wat experimenteren met het aantal kolommen in je galerij tot je de instelling hebt die de foto’s het best laat zien. Je kunt het aantal kolommen gelukkig eenvoudig wijzigen nadat je de galerij in de pagina hebt gezet.

    • Willekeurige volgorde
      Zet je een vinkje in dit vak, dan verandert de volgorde van de afbeeldingen in de galerij elke keer dat de pagina wordt geladen.

  14. Wanneer de instellingen zo staan als je wilt, klik je op de Galerij invoegen knop om de galerij op de pagina te zetten: Galerij invoegen knop in WordPress

  15. Gefeliciteerd! Je hebt net een fotogalerij op je pagina gezet.

    Kijk je naar de pagina in de editor (ik gebruik trouwens de TinyMCE Advanced editor plugin, vandaar de extra buttons), dan zie je de galerij zoals je deze op de site ziet:

    De fotogalerij in de WordPress editor

  16. Wil je wijzigingen aanbrengen in de galerij, zoals het wijzigen van het aantal kolommen of het toevoegen van afbeeldingen:

    • Klik ergens in de galerij in je editor om de galerij te selecteren. De geselecteerde galerij wordt nu omgeven door een grijs vlak:

      De geselecteerde fotogalerij in de WordPress editor

    • Galerij bewerken button in de WordPress editorAan de bovenkant van het grijze vlak, in het midden, zie je twee iconen. Klik op het potloodicoon, de Galerij bewerken button (het X icoon rechts verwijdert de galerij)

    • Je bent weer terug in het Galerij bewerken scherm, waar de gewenste veranderingen kunt aanbrengen.

Onderschriften laten zien onder afbeeldingen in een fotogalerij

In de meeste gevallen is het voldoende om alleen de afbeeldingen te laten zien in de fotogalerij.Soms is het echter nuttig om een beschrijving onder een afbeelding te laten zien, bijvoorbeeld de namen van de personen die op de foto staan.

Die beschrijvingen bij afbeeldingen worden onderschriften genoemd.

Onderschriften kun je aan de afbeeldingen toevoegen wanneer je de bijlagedetails voor de afbeeldingen invult, maar je kunt ze ook toevoegen in de mediabibliotheek of in het Galerij bewerken scherm.

Je opent het Galerij bewerken scherm als volgt:

  • klik je ergens op de galerij in je editor om de galerij te selecteren. De geselecteerde galerij wordt omgeven door een grijs vlak

  • Galerij bewerken button in de WordPress editorklik je op de Galerij bewerken button (het potlood) in de linker bovenhoek van het grijze vlak

  • je bent terug in het Galerij bewerken scherm, en je kunt onderschriften aan de afbeeldingen toevoegen.

Onder elke afbeelding in het Galerij bewerken scherm zie je een tekstvak met de tekst Plaats een onderschrift… . Klik in het tekstvak en typ de tekst die je onder de geselecteerde afbeelding wilt zien:

De tekstvakken onder de afbeeldingen waarin je de onderschriften kunt zetten in WordPress

Nadat je onderschriften bij de afbeeldingen in je galerij hebt getypt (lege onderschriften zullen gewoon leeg blijven), klik je op de Galerij bijwerken knop om de veranderingen in de galerij op te slaan. Sla hierna de pagina op, en ververs de pagina in de browser.

Met de onderschriften erbij ziet de fotogalerij er nu – in dit geval met vijf kolommen – als volgt uit:

WordPress fotogalerij met onderschriften

Stoeien met het aantal kolommen in de fotogalerij

Het aantal kolommen dat je laat zien in je galerij bepaalt sterk het effect dat de galerij op je bezoekers heeft. Je moet testen hoe jouw galerij er het best uit ziet, en uiteindelijk beslissen hoeveel afbeeldingen je in een rij – dus naast elkaar – wilt laten zien om het door jou gewenste effect te bereiken.

Het standaard aantal kolommen – dus het aantal kolommen dat wordt weergegeven wanneer ik de [gallery] shortcode zonder verdere toevoegingen in de pagina zet, – is drie kolommen. Je galerij laat in dat geval drie afbeeldingen naast elkaar zien, en net zoveel rijen als nodig is om alle afbeeldingen in de galerij te laten zien:

Fotogalerij met drie kolommen

De totale breedte van de content container (het gedeelte van der pagina dat de inhoud – tekst, afbeeldingen, video – bevat) wordt in dit geval verdeeld in drie gelijke delen, en de afbeeldingen worden gecentreerd in elk van deze delen.

Selecteer je een ander aantal kolommen, dan gebeurt hetzelfde. Selecteer je bijvoorbeeld vijf kolommen, dan wordt de content container verdeeld in vijf gelijke delen, en worden de afbeeldingen in elk van die delen gecentreerd:

Fotogalerij met vijf kolommen

De afmeting van afbeeldingen op de site en de invloed op de fotogalerij

De afbeeldingen in de fotogalerij zijn standaard thumbnail formaat (miniatuur). Verderop in deze handleiding zal ik je laten zien hoe je de grootte van de afbeeldingen in de galerij kunt aanpassen..

Je kunt de standaard afmetingen van de afbeeldingen op jouw WordPress site instellen onder Instellingen | Media. De standaardafmeting voor thumbnails op mijn site is 150 pixels bij 150 pixels:

Media-instellingen voor afmetingen afbeeldingen

Een thumbnail zijn een – eventueel – bijgesneden, meestal vierkante versie van de originele afbeelding. De thumbnail wordt vaak gebruikt als bijvoorbeeld berichtafbeelding op een blogpagina, of als galerijafbeelding.

Bij de grote en gemiddelde maten past WordPress de afbeeldingen proportioneel aan, zodat de langste kant van een afbeelding precies de maximale lengte voor dat formaat heeft.

Stel dat ik een afbeelding – met de naam test.jpg – van 1200px bij 900px op deze site zou uploaden, dan wordt deze afbeelding in vier afmetingen opgeslagen:

  • 1200px bij 900px, de originele afbeelding, met bestandsnaam test.jpg
  • 1024px bij 768px, met bestandsnaam test-1024×768.jpg
  • 300px bij 225px, met bestandsnaam test-300×225.jpg
  • 150px bij 150px, met bestandsnaam test-150×150.jpg

Heft jouw specifieke thema nog andere formaten nodig, dan kan het zijn dat er zelfs nog meer afmetingen worden opgeslagen.

WordPress slaat deze verschillende afmetingen op om ervoor te zorgen dat niet altijd het grootste bestand wordt geladen en live de afmetingen worden aangepast, waardoor de site langzamer draait dan nodig is.

Is de content container te smal om het aantal afbeeldingen dat je naast elkaar wilt laten zien in thumbnail formaat te bevatten, dan worden de afbeeldingen automatisch aangepast/kleiner afgebeeld.

Hoe worden afbeeldingen verkleind in een fotogalerij

Stel dat de content container 650 pixels breed is, en je wilt vijf kolommen laten zien in je galerij.

Elke kolom krijgt dan een breedte toegewezen van (650 pixels gedeeld door 5 gelijke delen =) 130 pixels. De breedte van elke afbeelding in de galerij wordt aangepast tot een maximum van 130 pixels.

Wil je ook nog een rand om de afbeeldingen heen, en ruimte tussen de afbeeldingen, dan worden die waarden van de grootte van de afbeelding afgehaald.

Je kunt de galerij verder naar je hand zetten door meer parameters aan de shortcode toe te voegen. Daarnaast kun je het uiterlijk van de fotogalerij ook naar jouw smaak aanpassen met behulp van stijlregels in CSS.

Bekijk ook deze gerelateerde artikelen

Vragen of opmerkingen over deze handleiding? Laat je reactie hieronder achter.

Bij het maken van deze handleiding is gebruik gemaakt van WordPress versie 4.1.1. De handleiding wordt aangepast wanneer nieuwe versies veranderingen met zich meebrengen die in de handleiding moeten worden opgenomen.

Deze handleiding is voor het laatst bijgewerkt op 28 april 2017 om 15:58.

Reageer op dit artikel

17 Reacties op "Hoe maak je snel en eenvoudig een fotogalerij in WordPress"

Abonneren op
avatar
Sorteren op:   nieuwste | oudste
Beaumonde
Gast
Beaumonde

Op dezelfde manier heb ik in thema: Bouquet een galerij aangemaakt en dat werkt prima. Nu heb ik het thema veranderd in Sugar and Spice en nu krijgt men een slideshow te zien (die ook nog eens erg traag gaat).
Hoe kan ik dat weer zo zetten dat het een foto galerij wordt?

Beaumonde
Gast
Beaumonde

Thanks!!! het werkt.. Ik heb alleen de tekst “type=”rectangle” toegevoegd achter “gallery…..”

Marjo
Gast
Marjo

Ik heb dit gedaan en ben er nog een beetje mee aan het stoeien om mooi te krijgen, maar dat terzijde. Wat er alleen gebeurt is dat ik op mijn laptop de foto’s goed zie, maar als ik ze mobiel (ipad of telefoon) bekijk, dan zijn er een aantal foto’s gedraaid. Hoe kan dat en belangrijker, hoe kan ik dat oplossen?

Gonny Bakker
Gast
Gonny Bakker

Hallo Robin,
bij het template Dustland Express, tijdens gebruik van de galerij met 3 kolommen, is het op de smartphone ook zichtbaar: 3 afbeeldingen naast elkaar, terwijl met het template Origin de afbeeldingen mooi per stuk onder elkaar vallen. Dit met dezelfde instellingen. Wat te doen? Dus geen 3 afbeeldingen naast elkaar voor de smartphone, maar per stuk onder elkaar. Voor de computer en laptop wel graag 3 afbeeldingen naast elkaar.

Tanja
Gast
Tanja

Hallo Robin, ik heb een galerij aangemaakt, maar nu verschijnt onder iedere foto als je er op klikt een mogelijkheid om een reactie te geven. dat wil ik natuurlijk niet. hoe kan ik dat wegkrijgen?

Patrick
Gast
Patrick

Een vraagje mbt de ondertitels van een foto.
Is het mogelijk om de tekst in twee regels toe te voegen onder de foto.
Ik heb namelijk bij diverse foto’s een ondertitel die lelijk wordt afgekort wanneer je bijvoorbeeld naar tablet of mobile formaat gaat.
Sommige woorden dienen namelijk niet gescheiden te worden en ik zou die woord combinatie graag bijelkaar op dezelfde regel houden.

Inge
Gast
Inge

Hallo,

Ik heb op WordPress mijn galerij ingevoegd alleen komen mijn foto’s onder elkaar te staan ook als ik het aantal kolommen wijzig. Hoe kan ik mijn foto’s naast elkaar krijgen?