Home Kennisbank Afbeeldingen & video Hoe maak ik een fotogalerij (grid, mozaïek of masonry)?

Hoe maak ik een fotogalerij (grid, mozaïek of masonry)?

Robert Oosterloo
Bijgewerkt op · 4 min lezen

Met het blok Galerij laat je een serie foto’s netjes zien. Klikt een bezoeker op een foto, dan opent hij groot in een lightbox, waarin hij door alle foto’s kan bladeren. Je kiest uit drie weergaven: Grid, Mozaïek en Masonry.

In het kort

  • Voeg in een kolom het blok Galerij toe en kies je foto’s bij Galerij.
  • Bij Foto’s per rij kies je 1, 2, 3, 4 of 6.
  • Weergave: Grid (standaard), Mozaïek of Masonry.
  • Met Maximum aantal foto’s weergeven toon je een willekeurige selectie.
  • Een klik opent de foto groot, tenzij je de foto een link hebt gegeven.

Nog geen website op leflite?

Wij bouwen hem samen met jou. Daarna pas je alles zelf aan, precies zoals in dit artikel.

  • Online binnen een week
  • Hosting, SSL en back-ups inbegrepen
  • Vanaf €49,95 per maand
Website van Inspirare Coaching op een laptop

Stap 1: Voeg het blok Galerij toe

Klik in een kolom op het plusje, zoek op galerij en kies het blok Galerij. Meestal zet je een galerij in een sectie met één brede kolom.

Stap 2: Kies of upload de foto’s

Klik bij het veld Galerij op de knop om afbeeldingen toe te voegen. Selecteer meerdere foto’s tegelijk met Ctrl (Windows) of Cmd (Mac) ingedrukt, of upload nieuwe. De volgorde pas je aan door de foto’s te slepen.

Stap 3: Kies het aantal Foto’s per rij

Bij Foto’s per rij kies je 1, 2, 3, 4 (standaard) of 6. Op een tablet of telefoon worden het automatisch minder kolommen.

Het blok Galerij geselecteerd in de editor, met rechts de velden Weergave en Mozaïek patroon gemarkeerd
Bij Weergave kies je Grid, Mozaïek of Masonry. Bij Mozaïek verschijnt het veld Mozaïek patroon.

Stap 4: Kies de Weergave

Grid

Grid (standaard) zet alle foto’s even groot in een raster. Rustig en overzichtelijk, ideaal als je foto’s dezelfde verhouding hebben.

Mozaïek (en je eigen patroon)

Mozaïek maakt een vierkant raster waarin sommige foto’s breed of hoog zijn. Dat geeft een speels, tijdschriftachtig beeld. Laat Mozaïek patroon leeg voor het standaardpatroon. Wil je het zelf bepalen? Elke letter is één foto:

  • 1 = vierkant
  • w = breed (twee vakken naast elkaar)
  • t = hoog (twee vakken boven elkaar)
  • b = groot (breed én hoog)

Scheid de letters met komma’s, bijvoorbeeld t,1,w,w,1. Het rijtje herhaalt zich vanzelf over alle foto’s. Begin met een hoge foto (t), dan vallen er geen gaten. Op tablet en telefoon wordt een mozaïek automatisch een eenvoudig raster van twee kolommen.

Een mozaïekgalerij met een hoge foto links, een brede en een vierkante foto rechtsboven en daaronder een vierkante en een brede foto
Een mozaïek wisselt vierkante, brede en hoge foto's af.

Masonry

Masonry zet je foto’s in kolommen met hun eigen verhouding: niets wordt bijgesneden. De onderkant is daardoor rafelig, zoals bij Pinterest. Kies masonry als je staande en liggende foto’s door elkaar hebt: in een grid oogt dat al snel rommelig.

Een masonrygalerij in drie kolommen met staande en liggende foto's die elk hun eigen verhouding houden
Masonry toont elke foto in zijn eigen verhouding.

Tip: bij Foto’s per rij op 1 wordt de weergave altijd een grid. Mozaïek en masonry hebben minstens twee kolommen nodig.

Maximum aantal foto’s weergeven

Heb je veel foto’s, maar wil je er maar een paar tonen? Vul bij Maximum aantal foto’s weergeven een getal in. Upload je bijvoorbeeld 12 foto’s en vul je 4 in, dan kiest de galerij willekeurig 4 foto’s uit de 12. Laat het veld leeg om alle foto’s te tonen.

Let op: de selectie is willekeurig. Bezoekers zien dus niet steeds dezelfde foto’s, en je kunt niet kiezen welke foto altijd vooraan staat. Gebruikt je website een cache, dan kan dezelfde selectie een tijd blijven staan.

Preview afbeelding grootte

Bij Preview afbeelding grootte kies je welke versie van de foto in de galerij staat. Voor een galerij met 3 of 4 foto’s per rij is Medium large (768 pixels) vaak genoeg. De lightbox toont altijd de volledige foto.

Titel en captions in de lightbox

Zet Titel en captions tonen aan, dan staat in de lightbox onder de vergrote foto de Titel en de Alternatieve tekst uit de mediabibliotheek. Vul die dus eerst netjes in, zie een goede alt-tekst invullen.

Wil je dat een foto niet de lightbox opent, maar naar een andere pagina linkt? Dat stel je in bij de foto zelf: zie een foto in de galerij klikbaar maken.

Liever foto’s die na elkaar voorbijkomen? Gebruik dan de afbeelding slider. Voor een rij logo’s, zie een rij met logo’s van klanten of partners.

Lukt het niet?

  • De foto’s wisselen steeds. Je hebt Maximum aantal foto’s weergeven ingevuld. Maak het veld leeg om alle foto’s te tonen.
  • Er zitten gaten in mijn mozaïek. Begin het patroon met een t, of laat Mozaïek patroon leeg voor het standaardpatroon.
  • Mijn mozaïek is op mobiel een gewoon raster. Dat klopt: op tablet en telefoon wordt het automatisch twee kolommen.
  • Een foto opent geen lightbox. Die foto heeft een link in de mediabibliotheek. Haal de link weg als je de lightbox wilt.
  • De galerij laadt traag. Kies een kleinere Preview afbeelding grootte en upload foto’s van maximaal 1200 pixels, zie afbeeldingen uploaden in het juiste formaat.

Kom je er niet uit? Neem contact met ons op.

Veelgestelde vragen

Waarom wisselen de foto's steeds?

Je hebt een maximum aantal foto’s ingesteld. Dan kiest de galerij elke keer een willekeurige selectie.

Welke weergave kies ik voor foto's van verschillende formaten?

Masonry. Die toont elke foto in zijn eigen verhouding, zonder bijsnijden.

Deel dit artikel

Robert Oosterloo

Robert Oosterloo is eigenaar en UX/UI-designer van Lef Creative in Kollum. Hij ontwerpt websites, webshops en software voor ondernemers in Noord-Nederland.

Lees ook

Ook zo’n website?

Je leest hier hoe makkelijk je een leflite-site zelf bijhoudt. Wil je er ook een? We denken vrijblijvend met je mee.

Liever direct contact? Bel Robert op 06 35 66 47 73 of stuur een .