WordPress Gids
Werken met het Afbeelding-blok

Afbeelding-blok icon
Afbeelding-blok icon

Het Afbeelding-blok laat je eenvoudig doen wat op bijna iedere pagina wel nodig is: een afbeelding op de pagina zetten. Afbeeldingen maken je site levendiger en je content aantrekkelijker.

De afbeelding kan op je site zelf staan, of op een andere site. Heb je een link naar een externe afbeelding, dan kun je deze in een Afbeelding-blok toevoegen aan je pagina.

Het Afbeelding-blok geeft je echter meer mogelijkheden dan alleen een afbeelding op een pagina zetten. Het laat je de afbeelding op diverse manieren uitlijnen, laat je de afbeelding vergroten en verkleinen in de blok editor, en nog veel meer.

Voeg een Afbeelding-blok toe aan de pagina

Je kunt een afbeelding op twee manieren op een pagina zetten:

  • door een Afbeelding-blok aan te maken en een afbeelding naar je site te laden.
  • door een afbeelding naar de pagina te slepen en op de goede plaats los te laten.

Afbeelding toevoegen via blok toevoegen

Plaats het Afbeelding-blok vanuit de sectie Algemene blokken waar je deze wilt op de pagina. Gebruik je het Afbeelding-blok regelmatig, dan kan het ook in de sectie Meest gebruikt staan.

Wanneer het Afbeelding-blok is geplaatst vraagt het om een afbeelding:

Afbeelding-blok toevoegen aan een pagina

Je hebt vier opties om de afbeelding op de pagina te zetten:

  • Slepen: sleep de afbeelding van je computer naar het grijze blok en laat het daar los. De afbeelding wordt dan geladen naar de site, waarna je het dan op de pagina kunt zetten.
  • Uploaden: laad de afbeelding vanaf je computer naar de site, waarna je het dan op de pagina kunt zetten.
  • Mediabibliotheek: selecteer een afbeelding die al op de site is geladen in de Mediabibliotheek. Je kunt hier eventueel ook nog nieuwe afbeeldingen uploaden.
  • Invoegen via URL: staat de afbeelding online maar niet in de Mediabibliotheek op je eigen site, dan kun je een link plakken naar die afbeelding toe. Je bent dan wel afhankelijk van de beheerder van de afbeelding of deze blijft staan op die plaats. Ik kies altijd voor het zelf laden van een afbeelding.

Een afbeelding toevoegen vanuit de Mediabibiotheek werkt zo:

  • Klik op de Mediabibiotheek knop. Het Media selecteren of uploaden scherm opent.Media selecteren en uploaden: mediabibliotheek
  • In de Mediabibliotheek tab kun je een afbeelding selecteren die al in de mediabibliotheek staat, of je kunt een nieuwe afbeelding uploaden door de afbeelding naar dit scherm te slepen. Wil je één of meerdere afbeeldingen uploaden door deze te selecteren vanaf je computer, ga dan naar de Bestanden uploaden tab:
    Media selecteren en uploaden: bestanden uploaden
  • Klik op de gewenste afbeelding om deze te selecteren. Aan de rechterkant van het scherm staan de details van de geselecteerde afbeelding:
    Media selecteren en uploaden: bijlagedetails
  • Hier kun je de Alt-tekst, de Titel, het Onderschrift, en de Omschrijving van de afbeelding invullen of aanpassen. Dit is zeker aan te raden om de afbeelding beter vindbaar te maken in de zoekmachines (dit is een onderdeel van zoekmachine-optimalisatie of SEO).
  • Zijn alle gegevens naar tevredenheid ingevuld, klik dan rechtsonderin op de blauwe Selecteer knop.

Gebruik één van bovenstaande opties om het afbeeldingbestand te koppelen aan het Afbeelding-blok. Is het bestand gekozen en gekoppeld, dan zie het Afbeelding-blok er zo uit:

Afbeelding-blok met toegevoegde afbeelding

Afbeelding toevoegen door slepen en loslaten (drag and drop)

De tweede manier om een afbeelding aan de pagina toe te voegen is de afbeelding slepen en loslaten op de gewenste plek (drag and drop).

  • Klik met de linkermuisknop op de afbeelding op je desktop (of in een folder) en hou de knop ingedrukt.
  • Sleep de afbeelding naar de tab van de browser met de pagina waarin de afbeelding moet komen te staan. Het muispijltje is veranderd in een kleine versie van de afbeelding en daaronder een pijl en de tekst Verplaatsen.
  • Beweeg met de muis over de tekst in de pagina tot je een blauwe lijn ziet op de plek waar de afbeelding moet komen:
    Afbeelding drag en drop
  • Laat de muisknop los.

Op de plek waar de afbeelding is losgelaten staat nu een nieuw afbeelding-blok met de afbeelding erin. Je kunt het blok nu naar eigen smaak uitlijnen en bewerken.

Omzetten van een Afbeelding-blok naar een ander bloktype

Je kunt een blok omzetten naar een ander bloktype door in het blokmenu links op het bloklogo te klikken.

Het Audio-blok kan worden omgezet naar een Galerij-blok, een Bedekking-blok, een Bestand-blok, en een Media & tekst-blok.

Zet een onderschrift onder de afbeelding

Je kunt een onderschrift (meestal een beschrijving van de afbeelding) aan de afbeelding toevoegen.

Klik hiervoor op de afbeelding zelf, zodat de blauwe aanpassingsrondjes verschijnen. Onder de afbeelding komt de tekst Onderschrift schrijven… te staan. Klik op deze tekst en schrijf het onderschrift.

Onderschrift toevoegen aan een afbeelding

Met de vier stijlknoppen, die in de kleine toolbar boven de onderschrifttekst staat wanneer je op de tekst staat, kun je de tekst vet maken, schuin zetten, doorhalen, en je kunt een link toevoegen aan de tekst. Heb je meer opmaakmogelijkheden nodig, dan kun je ook HTML codes in deze tekst gebruiken.

De blokmenu opties van het Afbeelding-blok

Het blokmenu van het Afbeelding-blok bevat een aantal opties om de afbeelding uit te lijnen, en om de afbeelding aan te passen.

Uitlijnen van de afbeelding op de pagina

De plaats waarop de afbeelding in de pagina komt te staan regel je met de uitlijningsopties in het blokmenu van het Afbeelding-blok:

Blok links uitlijnen icon:het blok links uitlijnen, naast het blok dat er onder staat
Blok centreren icon:het blok centreren
Blok rechts uitlijnen icon:het blok rechts uitlijnen, naast het blok dat er onder staat
Blok grote breedte icon:het blok in wijde breedte laten zien
Blok volledige breedte icon: het blok in volledige breedte laten zien

Blok uitlijningstips:

  • Het blok komt in eerste instantie zonder uitlijning op de pagina. Dit betekent dat het blok de gehele breedte van de inhoud inneemt, zonder dat er tekst of een afbeelding naast kan staan. Heb je een andere optie geselecteerd, maar wil je weer terug naar de situatie zonder uitlijning, dan klik je op de gekozen optie zodat deze niet meer geselecteerd is.
  • Link uitlijnen en rechts uitlijnen werkt samen met het blok dat er direct onder staat. Wil je het blok links of rechts naast een specifieke paragraaf of ander blok zetten, verplaats het blok dan blok naar direct boven dat blok. Selecteer dan pas links of rechts uitlijnen.
  • De uitlijningsoptie Grote breedte vergroot het blok tot deze tot de randen van het de content sectie van je thema reikt, zonder rekening te houden met de padding (de ruimte tussen de rand van de tekst en de rand van de content sectie).
  • De uitlijningsoptie Volledige breedte vergroot het blok tot de randen van het browserscherm.

De afbeelding vervangen of bewerken

Heb je een afbeelding op de pagina gezet, dan kom je er vaak achter dat je – bijvoorbeeld – eigenlijk een andere afbeelding had willen selecteren, of dat je nog geen Alt-tekst aan de afbeelding hebt toegevoegd.

Wanneer je de afbeelding wilt vervangen of bewerken, klik dan op het Bewerk afbeelding icon – Bewerk afbeelding – of dubbelklik (klik twee maal snel) met de linkermuisknop op de afbeelding:

In het blok verschijnt het Bewerk afbeelding scherm:

Afbeelding-blok: bewerk afbeelding scherm

Vanaf hier is de werkwijze dezelfde als bij het toevoegen van het Afbeelding-blok.

Ga je via de Mediabibliotheek, dan staat de huidige afbeelding geselecteerd, en kun je alsnog de Alt-tekst, de Titel, het Onderschrift, en de Omschrijving van de afbeelding invullen of aanpassen.

Link toevoegen aan de afbeelding

Je kunt de afbeelding een link meegeven voor wanneer op de afbeelding wordt geklikt. Klik hiervoor in het blokmenu op het link (Link icon) icon.

In het zoekvak kun je de pagina zoeker waarnaar de afbeelding moet verwijzen, of de URL van de site waarnaar de afbeelding moet verwijzen. Wil je niet naar een pagina of URL verwijzen, klik dan onder het zoekvak op:

  • Afbeelding-blok icon Mediabestand: de originele afbeelding wordt in een aparte tab geopend in je browser. Heb je een lightbox-plugin, dan wordt de afbeelding in een lightbox bovenop de pagina getoond.
  • Bijlagepagina icon Bijlagepagina: de originele afbeelding wordt geladen in dezelfde tab als de pagina.

Selecteer je Mediabestand of Bijlagepagina, dan komt in het zoekvak de link Mediabestand of Bijlagepagina te staan.

De opties Mediabestand en Bijlagepagina zijn er onder meer voor wanneer je de afbeelding kleiner op de pagina wilt zetten. maar wel de mogelijkheid wilt geven aan je bezoekers om de hele afbeelding te zien.

De andere opties bij het toevoegen en bewerken van een link zijn:

Bewerken icon:bewerk de link of de manier van linken
Verwijderen icon:verwijder de link
Sectie openen icon:open meer linkopties

Klik op het bewerken (Bewerken icon) icon om de link of de linkmanier te bewerken.

Linkopties voor een afbeelding

Onder het pijltje vind je de volgende opties voor de link:

  • Open in nieuwe tab: zet je deze switch aan, dan wordt de afbeelding – of waar je anders naar linkt – geopend in een nieuwe tab. Dit houdt je site open in de originele tab voor de bezoeker. Gebruik je een lightbox plugin in combinatie met Mediabestand, dan levert dit een vreemde situatie op, dus gebruik het dan niet bij Mediabestand.
  • Link CSS: wil je deze link een ander uiterlijk of gedrag meegeven, dan kun je in CSS een class maken en de naam hiervan aan deze link meegeven (zonder. voor de class naam).
  • Linkrelatie: wanneer je Open in nieuwe tab aanzet, dan komt hier noreferrer noopener te staan. Dit kun je eventueel aanpassen (wanneer je weet wat je doet).

De instellingen sidebar van het Afbeelding-blok

De instellingen sidebar – aan de rechterkant van de editor – geeft je extra instellingen voor het blok.

Voor het Afbeelding-blok zijn de volgende instellingen beschikbaar:

Afbeeldingsinstellingen

De afbeeldingsinstellingen laten je een alternatieve tekst aan de afbeelding meegeven, en laten je de afbeelding vergroten of verkleinen.

Een alternatieve tekst meegeven aan de afbeelding

Wanneer je een nieuwe afbeelding toevoegt, geef de afbeelding dan een goede titel en alternatieve tekst. De titel en de alternatieve tekst helpen namelijk mee bij het beter gevonden worden in de zoekmachines (lees: Google).

Afbeelding-blok - Blokinstellingen - Afbeeldingsinstellingen: Alt tekst

De titel is een beschrijving van de afbeelding. De alternatieve tekst – bekend als Alt tekst – is een beschrijving van de afbeelding voor mensen met geen of slecht zicht (de tekst wordt voorgelezen in hun schermlezer), en voor mensen die hun browser niet standaard afbeeldingen laten downloaden (ja, die mensen bestaan).

Je kunt de titel en de alternatieve tekst ingeven wanneer je een afbeelding in de Mediabibliotheek laadt. Je kunt deze gegevens ook ingeven wanneer je op de afbeelding klikt en uit het blokmenu het Afbeelding bewerken icon – Bewerk afbeelding – aanklikt.

Wil je een andere alternatieve tekst in een pagina dan de tekst die je hebt meegegeven bij het laden van de afbeelding, dan kun je deze tekst ingeven in het vakje Alt tekst (alternatieve tekst) onder Afbeeldingsinstellingen in de instellingen sidebar.

Belangrijk: gebruik geen groter-dan – > – en kleiner-dan – < – haken in je alternatieve tekst. Deze tekens worden gebruikt in HTML, en kunnen bij verkeerde plaatsing veel problemen opleveren. Je kunt deze haken wel zonder problemen in je gewone tekst gebruiken, maar daarbuiten kunnen ze door de browser worden gezien als HTML code, met alle gevolgen van dien.

Ik ben hier zelf achter gekomen toen geplaatste afbeeldingen opeens niet meer de correcte uitlijning op de pagina hadden, en ik veel tijd heb gespendeerd aan het oplossen van het probleem…

Aanpassen van de grootte van de afbeelding

Je kunt de grootte van de afbeelding op twee manieren aanpassen: met de muis of in de blokinstellingen in de Instellingen zijbalk.

Grootte van een afbeelding aanpassen met de muis
Grootte van een afbeelding aanpassen met de muis
De grootte aanpassen met de muis

Je kunt de grootte van de afbeelding eenvoudig aanpassen door met de muis de afbeelding uiteen te trekken. Klik daarvoor op de afbeelding zelf.

Afhankelijk van de uitlijning van de afbeelding verschijnen er twee of drie blauwe aanpassingsrondjes. Klik aan één van de kanten en hou de muisknop ingedrukt. Er verschijnt een blauwe rand langs de kant waar je de afbeeldingsgrootte aanpast. Je kunt de afbeelding nu vergroten of verkleinen door met je muis te bewegen.

De grootte van de afbeelding wordt proportioneel aangepast, zodat je geen vreemd uitgerekte afbeeldingen krijgt.

De grootte aanpassen in de instellingen sidebar
Grootte van de afbeelding instellen

Naast de handmatige manier met de muis kun je de grootte van de afbeelding ook instellen bij de blokinstellingen bij Grootte van de afbeelding onder Afbeeldingsinstellingen.

Klik je op de dropdown box onder Grootte van de afbeelding, dan heb je – afhankelijk van de grootte van de originele afbeelding – de keuze uit de verschillende maten die staan ingesteld onder Instellingen >> Media:

  • Thumbnail
  • Gemiddeld
  • Groot
  • en Volledige grootte, de grootte van de originele afbeelding

Dit is de grootte van het bestand dat wordt geladen wanneer de pagina wordt geladen. Heb je een grote afbeelding die je klein op de pagina zet, kies dan niet voor een grotere maat dan je nodig hebt. Dat maakt de pagina groter (in KB en MB) dan nodig, en vertraagt het laden van de pagina.

Nadat je de grootte van de afbeelding hebt geselecteerd, maar het is niet helemaal wat je wilt, dan heb je nog een optie om de grootte te ‘finetunen’ onder Grootte afbeelding: percentages van de gekozen afbeeldingsgrootte in combinatie met de breedte en hoogte in pixels.

Dit werkt als volgt:

  • Selecteer een percentage (25%, 50%, 75%, of 100%). De getallen in de vakjes voor breedte en hoogte zijn nu niet meer lichtgrijs gekleurd maar donker.
  • Is het percentage het nog nét niet, dan kun je de breedte óf de hoogte van de afbeelding naar wens aanpassen. De andere maat verandert (nog) niet automatisch mee.
  • Klik je op de Herstel knop, dan veranderen de maten weer terug naar de grootte die je hebt gekozen bij Grootte van de afbeelding.

Geavanceerde styling

Belangrijk: onderstaande geldt alleen voor gevorderde gebruikers met verstand van de CSS taal. Weet wat je doet!

Zijn de standaard opties voor dit blok niet voldoende, en wil je meer invloed op het uiterlijk van het blok, maak dan gebruik van CSS voor de styling.

Geavanceerde CSS styling voor je blok

In je stylesheet, of met behulp van een CSS plugin als Simple CSS, maak je een class voor de inhoud van het blok. Deze link je vervolgens aan het blok of aan meerdere blokken van hetzelfde type.

Selecteer hiervoor het blok waarvoor je een stijl hebt gemaakt, en klik in de instellingen sidebar op Geavanceerd. Er verschijnt een vak met de naam Extra CSS class. Hierin zet je de naam van de gemaakte CSS class minus de punt.