Afbeelding popup (lightbox) in WordPress

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.

  1. Maak een nieuwe (Gutenberg) pagina of bericht
  2. Voeg een Gallerij blok toe
  3. Vul de Gallerij met afbeeldingen
  4. 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!

Het verschil tussen WordPress.com en WordPress.org

Je hebt de knoop doorgehakt! Je wilt een website en dit keer ook echt. Misschien is nog niet alles 100% helder, maar dit keer ga je doorbijten. Dan is deze post voor jou. Te vaak zie ik verwarring over domeinnamen, WordPress, hosting en WordPress.com. Met onnodige teleurstelling als gevolg. In deze blogpost vertel ik je wat moet weten om de juiste keuzes te maken voor jouw situatie.

“Het verschil tussen WordPress.com en WordPress.org” verder lezen

Betalingen accepteren met WordPress

Wie wil er nou geen geld verdienen met z’n website!? Maar waar begin je, wat is een goede oplossing voor jouw situatie? In deze post probeer ik een overzicht te geven van de mogelijkheden om betalingen via je website te accepteren, door helderheid te scheppen in het oerwoud van Payment Service Providers, Payment Gateways, Plug-ins en Webshops.

“Betalingen accepteren met WordPress” verder lezen

WordCamp Nijmegen

Ook in 2019 wordt er weer een WordCamp Nijmegen georganiseerd. Bekijk de laatste updates op 2019.nijmegen.wordcamp.org

WordPress is meer dan een systeem om mee te bloggen: tientallen miljoenen websites zijn gebaseerd op WordPress. Sommige bronnen beweren zelfs meer dan 28% van het web. Talloze ondernemingen en zelfstandigen verdienen dan ook hun boterham dankzij WordPress, met een wereldwijd actieve gemeenschap als resultaat. De activiteiten van die gemeenschap bestaan feitelijk uit de organisatie van lokale bijeenkomsten die een dagdeel (meetup) of enkele dagen (WordCamp) in beslag nemen. Als organisatie van zo’n activiteit wordt je van ondersteuning en structuur voorzien door het WordPress Community Support (WCS).

“WordCamp Nijmegen” verder lezen

WordPress op je computer met Local by Flywheel

Onlangs liep ik tegen een nieuw stukje software aan: Local by Flywheel. Eerder hebben we een post gepubliceerd over het opzetten van een lokale WordPress installatie met Instant WP. Maar Instant WP heeft nadelen. Zo komt de software met een verouderde versie van WordPress en zit je vast aan de meegeleverde versies van Apache, PHP en MySQL. Het is daardoor bijvoorbeeld niet mogelijk om je site te testen in combinatie met PHP 7.

Local doet eigenlijk hetzelfde als Instant WP, maar nu heb je de keuze uit de webservers Apache en NGinx, diverse PHP versies (inclusief versie 7) en verschillende varianten van MySql. Binnen Local kun je meerdere WordPress installaties beheren, en je hebt de mogelijkheid om een blauwdruk te maken van een installatie (meer daarover verderop). Oh, en het ziet er ook nog gelikt uit, aan de slag dus!

“WordPress op je computer met Local by Flywheel” verder lezen