In dit bericht leg ik uit hoe je op een eenvoudige manier een lightbox in je WordPress berichten en pagina’s opneemt. Deze oplossing werkt alleen in combinatie met de Gutenberg blok-editor.
Wat is een lightbox?
Een lightbox is een popup met een afbeelding, video of tekst, die over jouw webpagina’s komt te liggen. In deze beschrijving ga ik er vanuit dat we alleen geïnteresseerd zijn in pop-ups voor afbeeldingen. Als je bijvoorbeeld teksten in een lightbox wilt moet je op zoek naar een alternatieve oplossing.
Hieronder staan vier afbeeldingen uit eerdere blogposts. Als je op een afbeelding klikt, opent een lightbox.
Voorwaarden
Een lightbox kun je op heel veel manieren voor elkaar krijgen. Ik heb zelf een voorkeur voor oplossingen die dicht bij standaard WordPress liggen. Ook wil ik graag een eenvoudige oplossing waar ik niet teveel instellingen voor hoef te doen. Bij voorkeur werkt het out-of-the-box .
Voor jouzelf zijn aanvullende voorwaarden dat je (1) de rechten hebt om plugins te installeren en dat je (2) de Gutenberg blok-editor gebruikt voor de opbouw van jouw pagina’s en berichten.
Voorbereiding
Als basis voor de lightbox afbeeldingen zullen we het blok Gallerij gebruiken. Volg onderstaande stappen.
- Maak een nieuwe (Gutenberg) pagina of bericht
- Voeg een Gallerij blok toe
- Vul de Gallerij met afbeeldingen
- Stel de Gallerij in met “Link naar: Mediabestand” (zie afbeelding rechts)
Als je bovenstaande vier stappen hebt doorlopen en je bekijkt (het voorbeeld van) de pagina of het bericht, dan heb je een eenvoudige gallerij met afbeeldingen. Als je op één van de afbeeldingen klikt, zie je alleen nog het grote formaat van de afbeelding. Je moet terug navigeren om weer op de bijbehorende webpagina te komen.
Plugin Installeren
Om ons verhaal compleet te maken hebben we een plugin nodig. Daarna zijn we direct klaar! De plugin die ik op deze pagina heb gebruikt is Advanced Gutenberg.
Na installatie en activatie van bovenstaande plugin werkt je ligthbox direct. Bekijk het voorbeeld van je pagina om het resultaat te zien.
Huh, wat is er nou gebeurd?
Dat ging wel heel gemakkelijk. De plugin Advanced Gutenberg introduceert de lightbox, maar is niet erg selectief in welke afbeeldingen dit krijgen. Alle afbeeldingen op de webiste met link naar hun eigen mediabestand zullen voorzien worden van een lightbox.
Dus wel even opletten dat er niet op ongewenste plekken een lightbox wordt toegevoegd!
