Als vormgever wil je een mooie/handige mogelijk manier je foto’s laten zien. Volgens mij moet een mooie gallery aan moet voldoen:

  • De gallery moet automatisch uitlijnen als je de grootte van je scherm verandert;
  • De gallery moet responsive zijn;
  • De gallery moet gemakkelijk te gebruiken zijn vanaf verschillende bronnen (Worpress gallery, Nextgen,Flickr, Instagram, Nextgen)
  • De gallery moet gebruik kunnen maken van een “lightbox”;

Je hebt niet meer voor iedere site een eigen plugin nodig, je kunt het nu me 1 doen.


4 belangrijke tips voor de Justified Image Grid plugin

De belangrijkste tips van Arthur. Tijdens de cursus leg ik ze uitvoeriger uit:

  1. In het eerste tabje van alle Justified Image Grid instellingen kun je aangeven dat de plugin altijd wordt gebruikt voor de standaard WordPress gallery. Vul dan “YES” in bij deze setting “Take over and replace -gallery- WordPress gallery shortcodes
  2. Bepaal de grootte/hoogte van je galleries bij “Target row height“.
    Vul hier de hoogte in in pixels. Probeer van alles tussen 200px en 400px.
  3. Bepaal de maximale afwijking voor een rij bij “Row height max deviation (+-)”.
    Vul hier de pixels in. Als je 0 (nul) invult worden alle rijen dus even groot. Ik vul meestal tussen 50px en 200px in.
  4. Het kan zijn dat je laatste rij niet compleet is en dat er één of meer plaatjes onderaan bungelen. Je kan dit voorkomen bij de onderstaande instelling: “Incomplete last row“. Vul hier “hide” in.

Ga naar plugin website

Voorbeelden Justified Image Grid WordPress plugin

Hieronder een voorbeeld van de Justified Image Grid WordPress plugin. Onder de afbeeldingen staan de belangrijkste settings.


Voorbeeld 1

rijhoogte 100 pixels


Thumbs spacing:2
Row height: 100
Height deviation: 0



Thumbs spacing:2
Row height: 100
Height deviation: 0
Last row: hide



Thumbs spacing:2
Row height: 100
Height deviation: 100


Voorbeeld 2

rijhoogte 200 pixels


Thumbs spacing:5
Row height: 200
Height deviation: 0
Last row: hide



Thumbs spacing:5
Row height: 200
Height deviation: 100
Last row: hide



Thumbs spacing:1
Row height: 200
Height deviation: 100
Last row: hide


Voorbeeld 3

rijhoogte 400 pixels


Thumbs spacing:15
Row height: 400
Height deviation: 0
Last row: hide



Thumbs spacing:15
Row height: 400
Height deviation: 200
Last row: hide



Thumbs spacing:1
Row height: 400
Height deviation: 400
Last row: hide