WordPress Gids
Werken met het Afbeelding-blok

Afbeelding-blok

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.

In deze gids over het Afbeelding-blok komen de volgende onderwerpen aan bod:

Hoe voeg je een Afbeelding-blok toe aan je pagina

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: afbeelding toevoegen

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.

Gebruik één van deze 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: afbeelding toegevoegd

Hoe zet je 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.

Afbeelding-blok: onderschrift toevoegen

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.

Hoe lijn je de afbeelding uit op je pagina

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

Afbeelding-blok: uitlijningsinstellingen

De verschillende uitlijningsopties die je kunt gebruiken voor afbeeldingen zijn:

Niet uitgelijnd

Afbeelding-blok: uitlijningsinstellingen - niet uitgelijnd

Links uitlijnen ⇢ Links uitlijnen

Afbeelding-blok: uitlijningsinstellingen - links uitlijnen

Centreren ⇢ Centreren

Afbeelding-blok: uitlijningsinstellingen - centreren

Rechts uitlijnen ⇢ Rechts uitlijnen

Afbeelding-blok: uitlijningsinstellingen - rechts uitlijnen

Grote breedte ⇢ Grote breedte

Afbeelding-blok: uitlijningsinstellingen - grote breedte

Volledige breedte ⇢ Volledige breedte

Afbeelding-blok: uitlijningsinstellingen - volledige breedte

Afbeelding-blok uitlijningstips:

  • De afbeelding die je plaatst komt in eerste instantie zonder uitlijning op de pagina. Dit betekent dat het blok met de afbeelding de gehele breedte van de inhoud inneemt, zonder dat er tekst of een andere 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 de afbeelding links of rechts naast een specifieke paragraaf of ander blok zetten, verplaats dan eerst het Afbeelding-blok naar direct boven dat blok. Selecteer dan pas links of rechts uitlijnen.
  • Verplaatsen van het Afbeelding-blok werkt alleen wanneer de afbeelding niet link of rechts is uitgelijnd. Wil je een links of rechts uitgelijnde afbeelding verplaatsen, selecteer dan het blok, kies een andere uitlijningsoptie (ik selecteer meestal centreren) en verplaats dan het Afbeelding-blok naar de gewenste plaats.
  • De uitlijningsoptie Grote breedte vergroot de afbeelding 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 de afbeelding tot de randen van het browserscherm. zorg voor een afbeelding van goede kwaliteit en voldoende breedte, zodat je geen wazige afbeeldingen op je site krijgt.

Hoe geef je de afbeelding een titel en een alternatieve tekst

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 het ook ingeven wanneer je op de afbeelding klikt en uit het blokmenu de optie Afbeelding bewerken kiest.

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 blokinstellingen.

Belangrijk: gebruik geen groter-dan – > – en kleiner-dan – < – haken in je titel of 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…

Hoe pas je de grootte van de afbeelding aan

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

Afbeelding-blok - Blokinstellingen - Afbeeldingsinstellingen: afbeeldingsgrootte 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 op één van de rondjes en hou de muisknop ingedrukt. 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 blokinstellingen

Afbeelding-blok - Blokinstellingen - Afbeeldingsinstellingen: Grootte van de afbeelding

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.
Afbeelding-blok - Blokinstellingen - Link instellingen

Je kunt de afbeelding een link meegeven, zodat bij het aanklikken van de afbeelding iets gebeurt. Klik hiervoor bij de blokinstellingen bij Link instellingen op de dropdown box onder Link naar en selecteer één van de vier opties:

  • Geen: de standaardinstelling. Klikken op de afbeelding doet niets.
  • 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: de originele afbeelding wordt geladen in dezelfde tab als de pagina.
  • Aangepaste URL: de afbeelding linkt door naar een andere pagina of website.

De opties Mediabestand en Bijlagepagina zijn er 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.

Selecteer je optie Mediabestand, Bijlagepagina, of Aangepaste URL, dan verschijnen er nog een aantal velden en een drie instellingen en een switch:

  • Link URL: dit is de URL waarnaar de afbeelding linkt. Deze kun je alleen veranderen bij de optie Aangepaste URL, zodat je kunt linken naar een ander bestand of een andere pagina dan de afbeelding.
  • 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-class: 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).

Style de afbeelding met CSS

Zijn de standaard opties voor afbeeldingen niet voldoende, en wil je meer invloed op het uiterlijk van de afbeeldingen die je plaatst, dan kun je gebruik maken van CSS voor de styling van je afbeeldingen. Zo kun je bijvoorbeeld een lijn rond of een schaduw onder de afbeelding zetten.

Dit geldt trouwens alleen voor gevorderde gebruikers met verstand van de CSS taal. Weet wat je doet!

In je stylesheet, of met behulp van een CSS plugin als Simple CSS, maak je een class voor je afbeelding. Deze link je vervolgens aan je afbeelding(en).

Selecteer hiervoor de afbeelding, en klik bij de blokinstellingen op Geavanceerd. Er verschijnt een vak met de naam Extra CSS class. Hierin zet je de naam minus de . van de gemaakte CSS class-naam.