Hoe gebruik je de WordPress gallery shortcode parameters

Leestijd: 5 minuten

Hoe gebruik je de WordPress gallery shortcode parametersIn deze handleiding bespreek ik de parameters die je kunt gebruiken met de standaard WordPress [gallery] shortcode om de galerij naar je eigen hand te zetten.

De [gallery] shortcode geeft je de mogelijkheid om extra parameters te gebruiken om het uiterlijk en gedrag van de WordPress galerij op je site aan te passen naar jouw smaak. Hiervoor moet je wel in de HTML code van je pagina duiken.

Spelen met de HTML code

De HTML code van je pagina kun je zien en bewerken wanneer je klikt op tabblad Tekst in de rechter bovenhoek van de WordPress editor:

Tabblad Tekst in de WordPress editor

Kijk je naar de fotogalerij die ik heb gemaakt in tabblad Tekst, dan zie je de code voor deze galerij met de parameters die zijn meegegeven aan de shortcode. Je kunt hier ook parameters toevoegen, veranderen, of verwijderen.

De shortcode voor de fotogalerij op deze pagina ziet er zo uit:

[gallery ids=”126,127,128,129,130,131,132,133″]

Welke parameters voor de [gallery] shortcode kun je veranderen

De belangrijkste parameters (er zijn er nog wat meer die je bijna nooit gebruikt) voor de [gallery] shortcode zijn:

ids

De [gallery] shortcode, zoals deze standaard in een pagina wordt gezet, laat de unieke IDs – of identificatienummers – van de afbeeldingen in de galerij zien zoals ze in jouw WordPress site bekend zijn. Staan er geen afbeelding-IDs in de shortcode, dan worden alle afbeeldingen die aan deze pagina zijn gelinkt in de galerij getoond.

Het leuke van het feit dat je afbeelding-IDs aan de shortcode kunt meegeven, is dat je ook IDs kunt gebruiken van afbeeldingen die niet aan de pagina zijn gelinkt. Het enige dat je hoeft te toen is het ID op te zoeken van de afbeelding en deze aan de ids parameter in de shortcode toe te voegen.

Hoe vind je een afbeelding-ID op een WordPress installatie

Methode 1

Ga naar de Mediabibliotheek, zoek de afbeelding die je wilt toevoegen, ga met je muis op de afbeelding staan, en de code wordt zichtbaar in de linker benedenhoek van het scherm:

Afbeelding-ID in de Mediabibliotheek

Methode 2

Installeer de Admin Columns plugin. Deze plugin stelt je in staat om de kolommen op de verschillende pagina’s in het admin gedeelte van WordPress naar jouw smaak aan te passen. Ik gebruik deze op al mijn sites.

Heb je deze plugin geïnstalleerd, dan kun je de ID kolom eenvoudig toevoegen aan je Mediabibliotheek-scherm, zodat je direct het ID van de afbeeldingen kunt zien in het overzicht:

Afbeelding-ID in de Mediabibliotheek met de Admin Columns plugin

columns

De columns parameter bepaalt in hoeveel kolommen de afbeeldingen in de galerij worden getoond. Standaard worden er drie kolommen getoond, de parameter wordt dan niet getoond in de shortcode.

Wil je meer of minder kolommen naast elkaar laten zien in deze galerij, dan voeg je de columns parameter toe aan de shortcode, en wijzig je eenvoudig het aantal kolommen.

Bijvoorbeeld:

[gallery columns=”5″ ids=”57,58,59,60,61,62,63,64″]

size

Elke afbeelding die in de Mediabibliotheek wordt geladen wordt in een aantal formaten opgeslagen, afhankelijk van de begingrootte van de afbeelding. De standaardmaat voor de afbeeldingen in de galerij is thumbnail.

De standaardformaten vind je terug in Instellingen | Media:

Media-instellingen voor afmetingen afbeeldingen

Om een ander afbeeldingsformaat dan thumbnails in je galerij te laten zien, maak je gebruik van de size parameter in de [gallery] shortcode. Je hebt de keuze uit de vier bovengenoemde standaardformaten plus eventuele formaten die extra aan je site hebben toegevoegd, bijvoorbeeld door je template.

De standaardformaten zijn (uitgaande van het voorbeeld):

  • thumbnail
    verkleind tot 150px en vierkant uitgeknipt

    [gallery size=”thumbnail”]
  • medium
    de lange zijde van de afbeelding is 300px lang, de korte zijde is in verhouding

    [gallery size=”medium”]
  • large
    de lange zijde van de afbeelding is 1024px lang, de korte zijde is in verhouding

    [gallery size=”large”]
  • full
    de volledige afbeelding zoals je deze op de site hebt gezet

    [gallery size=”full”]

Wees er wel van bewust dat je, wanneer je een ander formaat gebruikt dan thumbnail, je galerij waarschijnlijk afbeeldingen zal bevatten die niet even groot zijn. Dit komt doordat WordPress de afbeeldingen aanpast naar de langste zijde en de korte zijde in verhouding verkleint.

Voorbeeld: wanneer ik de voorbeeld-galerij in medium formaat laat zien in drie kolommen, dan ziet dat er zo uit:

Voorbeeld galerij met ongelijke afbeeldingen

Wil je een nette galerij, dan raad ik je aan alleen gebruik te maken van thumbnail afbeeldingen. Gebruik, medium, large, en full afbeeldingen alleen wanneer je er een goede reden voor hebt.

link

Standaard zijn de afbeeldingen gelinkt aan de originele afbeelding op de bijlagepagina.

Er zijn nog twee andere opties:

  • file
    Koppelt de afbeeldingen direct aan het originele bestand (het mediabestand)

    [gallery link=”file”]
  • none
    Verwijdert elke koppeling, zodat het originele bestand niet kan worden bekeken

    [gallery link=”none”]

Maak je gebruik van de optie file, dan wordt het originele bestand in de browser geopend, wat niet zo mooi is. Een betere oplossing is het gebruik van een plugin die de afbeelding in een lightbox opent.

Afbeelding in een lightbox van jQuery Colorbox

Zelf maak ik gebruik van de jQuery Colorbox plugin. Deze plugin geeft je veel controle over hoe afbeeldingen worden getoond, en het geeft je onder meer de mogelijkheid alle afbeeldingen in de galerij in een slideshow te laten zien.

orderby

Je kunt de afbeeldingen in je galerij verder op verschillende manieren sorteren.

De sorteermogelijkheden zijn:

  • menu_order (standaard)
    de volgorde waarin je de afbeeldingen gesorteerd hebt in het Galerij bewerken scherm

    [gallery orderby= “menu_order”]
  • title
    sorteert op de titel van de afbeeldingen

    [gallery orderby=”title”]
  • post_date
    sorteert op de datum/tijd van de afbeeldingen

    [gallery orderby=”post_date”]
  • rand
    willekeurige volgorde (random). De volgorde verandert wanneer de pagina wordt geladen

    [gallery orderby=”rand”]
  • ID
    sorteert op de ID-nummers van de afbeeldingen

    [gallery orderby=”ID”]

order

Ten slotte kunt Je selecteren of de sortering van orderby op- of aflopend gebeurt:

  • ASC
    alfabetisch en numeriek oplopend

    [gallery order=”ASC”]
  • DESC
    alfabetisch en numeriek aflopend

    [gallery order=”DESC”]

Uiteraard kun je alle parameters combineren in een enkele opdracht, zodat je kunt eindigen met een “korte” code zoals deze:

[gallery columns=”5″ size=”medium” link=”file” order=”DESC” orderby=”ID” ids = ” 57,58,59,60,61,62,63,64 “]

Wil je het uiterlijk van de standaard WordPress fotogalerij verder naar je eigen smaak aanpassen, dan moet je het diepe in en gebruik maken van CSS code.

Bekijk ook deze gerelateerde artikelen

Vragen of opmerkingen over deze handleiding? Laat dan 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 WordPress versies veranderingen met zich meebrengen die in de handleiding moeten worden opgenomen.

Deze handleiding is voor het laatst bijgewerkt op 12 oktober 2017 om 15:47.

Reageer op dit artikel

Laat als eerste een reactie achter.

Abonneren op
avatar