Hoe maak je de standaard WordPress galerij responsive

Hoe maak je de standaard WordPress galerij responsiveTegenwoordig worden de meeste websites bekeken op een ander en mobieler apparaat dan een desktop PC. WordPress heeft zich hierop aangepast door websites responsive te maken. Alleen is de standaard WordPress galerij tot nog toe vergeten. In dit artikel laat ik je stap voor stap zien hoe je de standaard galerij van WordPress responsive maakt.

De standaard afbeeldingengalerij die in WordPress is ingebouwd werkt goed, en je kunt het uiterlijk eenvoudig aanpassen met stijlregels die je in het CSS stylesheet van jouw WordPress website zet.

De standaard galerij werkt alleen niet goed op kleinere schermen, zoals op je tablet of je mobiele telefoon. De layout van de galerij blijft hetzelfde, op welk apparaat je ook kijkt. De galerij is niet responsive, wat betekent dat het het uiterlijk zich niet automatisch aanpast wanneer je de galerij bekijkt op een ander formaat scherm.

Deze voorbeeldgalerij – zonder verdere styling – ziet er op een desktop goed uit:

Standaard WordPress galerij met zes kolommen

Ook op het scherm van een laptop of tablet zijn de zes afbeeldingen die de galerij naast elkaar laat zien meestal wel duidelijk te bekijken.

Het wordt pas een probleem wanneer je deze galerij bekijkt op het kleinere scherm van een smartphone. De afbeeldingen zijn dan wel erg klein om nog goed te zien:

Standaard WordPress galerij met zes kolommen op smartphone

En dan praat ik nog niet eens over een WordPress galerij met negen afbeeldingen naast elkaar, zoals je weleens ziet op een pagina zonder sidebar:

Standaard WordPress galerij met negenkolommen op smartphone

Wat je eigenlijk wilt, is dat je galerij zich automatisch aanpast naar het (browser-) scherm waarop deze wordt bekeken.

Standaard kolombreedtes in de WordPress galerij

WordPress geeft elke kolom in de galerij een standaard kolombreedte mee. Deze breedte is geen vast aantal pixels, maar een percentage van de breedte van de container waarin de galerij staat.

Stel je in dat er één afbeelding per regel wordt getoond, dan is die kolom 100% van de container breed. Worden twee afbeeldingen naast elkaar getoond, dan is elke kolom 50% van de container breed.

Dit gaat zo door tot er negen afbeeldingen naast elkaar worden getoond op dezelfde regel (de kolommen zijn dan 11,11% breed).

Standaard kolombreedtes

WordPress zet standaard drie afbeeldingen naast elkaar in een galerij. Er is dan ook geen regel voor drie kolommen. De kolombreedte die hierbij hoort – 33,33% – wordt standaard toegewezen. Zijn er meer of minder dan drie afbeeldingen naast elkaar, dan wordt die kolombreedte overschreven. Cascading, de C van CSS, in actie.

Binnen de kolombreedte wordt de afbeelding in het midden van de kolom geplaatst. De afbeeldingsgrootte die je voor de galerij selecteert, is één van vier mogelijke afmetingen (die zijn ingesteld onder Instellingen | Media):

  • thumbnail: standaard 150px bij 150px
  • gemiddeld: standaard maximaal 300px breed bij 300px hoog
  • groot: standaard maximaal 1024px breed bij 1024px hoog
  • volledige grootte: de afmetingen van de originele afbeelding

De thumbnail is altijd een vierkant, waar nodig – als de afbeelding geen vierjkant is – uitgesneden van de originele afbeelding. De andere afmetingen behouden de originele verhoudingen.

Een afbeelding van 800px bij 600px, bijvoorbeeld, geeft een thumbnail van 150px bij 150px, maar bij gemiddelde grootte zijn de afmetingen 300px bij 225px.

De uiteindelijke grootte van de afbeeldingen in de galerij op het scherm is afhankelijk van:

  • de grootte van het browserscherm waarop je de galerij bekijkt
  • de breedte van de ruimte op de pagina
  • het aantal kolommen dat is ingesteld
  • de grootte van de padding en eventueel de margin rondom de afbeeldingen
  • andere verfraaiingen als schaduw onder en een lijn rondom de afbeeldingen

De grootte – op het scherm – van de afbeeldingen in je galerij wordt dus onder meer bepaald door de grootte van de ruimte op de pagina waarin de galerij is opgenomen. Dit noem je de container.

Gebruik je thumbnails in je galerij, dan zijn deze standaard 150px bij 150px groot.

Groter dan de gekozen afmetingen zullen de afbeeldingen ook niet worden. De afmetingen worden wel kleiner om zich aan het scherm aan te passen.

Voorbeeld:

Is de container op de pagina waarin de galerij staat 740px breed met een padding van 10px rondom, en is de padding rond elke thumbnail ook 10px rondom, dan zijn de thumbnails bij zes afbeeldingen naast elkaar niet groter dan 100px bij 100px.

Dit staat nog los van andere verfraaiingen die je aan je galerijafbeeldingen meegeeft.

WordPress galerij thumbnail wordt kleiner bij meer afbeeldingen naast elkaar

Hoe maak je de galerijkolommen responsive

Zoals je kon zien in de voorbeelden, is het naast elkaar laten zien van teveel afbeeldingen in een standaard WordPress galerij op kleinere schermen ondoenlijk. Eigenlijk wil je dat de site op je smartphone maximaal drie, twee, of misschien maar één afbeelding op een regel laat zien.

Dit bereik je redelijk eenvoudig met een media query en een aanpassing van de kolombreedte in je stylesheet.

Het testen in je browser

Maak voor het testen een galerij aan met het maximale aantal afbeeldingen dat je voor jouw site naast elkaar wilt laten zien. Laten we ervan uitgaan dat die er zes zijn, zoals in het voorbeeld.

Het testen van de afbeeldingsgrootte doe je in je favoriete browser. Gebruik je Google Chrome, dan is en plugin als Viewport Resizer hier perfect voor.

Heb je in je stylesheet al media queries met vaste breakpoints staan, dan test je in je browser bij elk breakpoint of de afbeeldingen in de galerij te klein worden.

Verklein nu je browserscherm of gebruik je plugin om dit te bereiken.

Stel dat je bij een schermbreedte van 768px de afbeeldingen bij zes stuks naast elkaar te klein vindt worden. Misschien dat drie afbeeldingen naast elkaar het perfecte aantal is.

Open dan je stylesheet (style.css in WordPress), zoek in het bestand de media query voor de schermbreedte van 768px op (als deze bestaat in je stylesheet), en verander de galerijkolombreedtes voor alle aantallen kolommen (behalve één kolom, die is altijd 100%) naar de breedte van drie afbeeldingen naast elkaar:

Nu staan er drie afbeeldingen naast elkaar wanneer het scherm maximaal 768px breed is:

Drie kolommen bij een schermbreedte van maximaal 768px

Let wel: deze regels gelden voor alle galerijen op je site, niet alleen voor deze ene galerij!

Wil je toch liever vier afbeeldingen naast elkaar lat zien bij deze schermbreedte, dan verander je het percentage in de code naar 25%:

… en ziet je galerij er zo uit:

Vier kolommen bij een schermbreedte van maximaal 768px

Maak het scherm weer kleiner.

Merk je bijvoorbeeld dat bij een schermbreedte van 480px twee afbeeldingen naast elkaar misschien beter is, maar heb je voor 480px geen standaard breakpoint ingesteld, dan voeg je deze alsnog toe na alle regels voor het breakpoint daarvoor:

Het resultaat ziet er dan zo uit:

Twee kolommen bij een schermbreedte van maximaal 480px

Als laatste kom je er misschien achter dat bij 320px één afbeelding per regel het best is. Dan voeg je deze regels toe aan het 320px breakpoint (wanneer je dat breakpoint gebruikt in jouw site; zo niet, dan voeg je deze toe):

Met dit resultaat:

Eén kolom bij een schermbreedte van maximaal 320px

Bekijk wel of de grootte van de afbeeldingen die je hebt gekozen in de galerij werkt voor die kleinere schermen.

Misschien ziet een afbeelding van gemiddelde grootte (maximaal 300px breed) er op een mobiel scherm beter uit dan een thumbnail van 150px bij 150px:

Eén kolom met afbeeldingen van gemiddelde breedte bij een schermbreedte van maximaal 320px

De afbeeldingen passen zich aan de containerbreedte aan, en zijn hierdoor waarschijnlijk wat minder breed dan 300px omdat de marges die zijn ingesteld voor de site én de schermbreedte ze verkleinen. Het ziet er volgens mij wel goed uit.

De boodschap hier is: testen, testen, testen, en test net zo lang tot de standaard WordPress galerij aan jouw voorkeur voldoet.

Conclusie

Het kan zijn dat bij jouw website de breakpoints wat anders liggen, of dat je zelf besluit dat zes afbeeldingen naast beter staat bij een schermbreedte van 768px. Bijna alles is mogelijk met media queries. Pas de WordPress galerij op je eigen site net zo lang aan dat deze goed responsive is en jij tevreden bent.

Heb je zelf je standaard WordPress galerijen responsive gemaakt? Hoe is dit verlopen? Heb je nog tips? Deel je ervaring in de reacties hieronder.

Reageer op dit artikel

3 Reacties op "Hoe maak je de standaard WordPress galerij responsive"

Abonneren op
avatar
Sorteren op:   nieuwste | oudste
Laurens Beijen
Gast
Laurens Beijen

Hartelijk dank voor dit duidelijke verhaal.
Bij galerijen in WordPress mis ik nog iets anders: de mogelijkheid om aan de verschillende foto’s van de galerij linken naar de daarmee samenhangende webpagina’s te koppelen. Bij een individuele foto die niet in een galerij staat is zo’n mogelijkheid er wel. Of vergis ik me en kan het ook bij foto’s in een galerij? Of zou ik een plugin kunnen gebruiken om deze wens te verwezenlijken?

Laurens Beijen
Gast
Laurens Beijen

Een vervolg op mijn vraag van gisteren: inmiddels heb ik de plugin Envira Gallery geïnstalleerd. Die is responsive en geeft bovendien de mogelijkheid om aan iedere foto een link naar een andere webpagina te koppelen. Dat neemt niet weg dat ik je verhaal heel leerzaam vind.

wpDiscuz