Afbeelding blok
Het Afbeelding block is een standaard WordPress-block (core/image) waarmee je een enkele afbeelding op een pagina plaatst. SOIL voegt hier automatisch lightbox-functionaliteit aan toe: koppel je de afbeelding aan het mediabestand, dan opent deze in een lightbox in plaats van naar een aparte afbeeldingspagina te navigeren.
Het block toevoegen
Zoek in de blokken-editor op “Afbeelding” en voeg het block toe, of sleep een afbeelding rechtstreeks vanuit de mediabibliotheek (of vanaf je computer) de pagina op.
Je kunt een afbeelding op drie manieren instellen:
- Uploaden — kies een nieuw bestand van je computer
- Mediabibliotheek — selecteer een eerder geüploade afbeelding
- Invoegen via URL — plak de directe URL van een extern beeld
Uitlijning
Kies via de blokwerkbalk hoe de afbeelding zich verhoudt tot de tekstkolom:
| Uitlijning | Omschrijving |
|---|---|
| Geen | Standaardbreedte, uitgelijnd met de tekst |
| Links / Rechts | Kleine afbeelding met tekst eromheen (float) |
| Centreren | Gecentreerd binnen de tekstkolom |
| Breed | Breder dan de tekstkolom, past bij de themalay-out |
| Volledige breedte | Vult de volledige breedte van de pagina |
Formaat en uitsnede
| Instelling | Omschrijving |
|---|---|
| Beeldverhouding | Dwing een vaste verhouding af (bijv. vierkant, 16:9, 4:3) — de afbeelding wordt bijgesneden om te passen |
| Schalen | Bepaalt hoe de afbeelding zich vult binnen de ingestelde afmetingen: Bedekken (crop, vult volledig), Bevatten (past volledig binnen, kan witruimte geven) of Vullen (rekt uit, kan vervormen) |
| Afbeeldingsgrootte | Kies een vooraf gegenereerde WordPress-formaat (bijv. Medium, Groot, Volledige grootte) |
| Breedte / Hoogte | Handmatige afmetingen in pixels |
| Bijsnijden | Open de ingebouwde uitsnede-tool om zelf een deel van de afbeelding te selecteren |
> Tip: Gebruik Beeldverhouding in combinatie met Schalen: Bedekken voor een consistente, uniforme uitstraling als je meerdere afbeeldingen met verschillende oorspronkelijke verhoudingen naast elkaar toont.
Alt-tekst en titel
| Veld | Omschrijving |
|---|---|
| Alternatieve tekst | Beschrijving van de afbeelding voor schermlezers en zoekmachines. Belangrijk voor toegankelijkheid en SEO — laat dit veld niet leeg bij informatieve afbeeldingen. |
| Titelattribuut (onder Geavanceerd) | Tekst die verschijnt als tooltip bij het hoveren over de afbeelding. Wordt zelden gebruikt en is niet toegankelijkheidsvriendelijk — geef de voorkeur aan alternatieve tekst of een onderschrift. |
Onderschrift
Klik onder de afbeelding op “Voeg onderschrift toe” om een bijschrift te tonen. Het onderschrift ondersteunt basale tekstopmaak zoals vet, cursief en links.
Link
Bepaal via Link naar waar een klik op de afbeelding naartoe gaat:
| Optie | Omschrijving |
|---|---|
| Geen | De afbeelding is niet klikbaar |
| Mediabestand | Linkt naar het volledige afbeeldingsbestand — SOIL opent dit automatisch in een lightbox (zie hieronder) in plaats van te navigeren |
| Bijlagepagina | Linkt naar de aparte WordPress-pagina van de afbeelding |
| Aangepaste URL | Linkt naar een zelf ingevoerde URL, bijv. een andere pagina op de site |
Bij Mediabestand en Aangepaste URL kun je aanvullend instellen of de link in een nieuw tabblad opent.
Automatische lightbox (SOIL)
Wanneer een afbeelding is gekoppeld aan Mediabestand (en niet in een nieuw tabblad opent), vervangt SOIL de standaardnavigatie automatisch door een lightbox: bezoekers zien de afbeelding vergroot in een overlay in plaats van naar een losse pagina te gaan. Dit werkt ook voor een Galerij-block met meerdere afbeeldingen — die openen dan gegroepeerd, zodat bezoekers ertussen kunnen bladeren.
> Wil je dit gedrag niet, kies dan Link naar: Geen of Bijlagepagina, of laat de link in een nieuw tabblad openen.
Stijl
Onder Stijlen in de zijbalk kun je (afhankelijk van het actieve thema) een duotoonfilter toepassen op de afbeelding, waarmee deze wordt ingekleurd met twee kleuren uit de themakleuren.