WordPress Gids
Werken met het Afbeelding-blok

Afbeelding-blok

Het Afbeelding-blok laat je doen wat op bijna iedere pagina wel nodig is: een afbeelding op de pagina zetten. 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 een 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.

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

Op het moment dat er een uitlijningsoptie is geselecteerd zie je die optie aangegeven in het blokmenu, zoals hier rechts uitlijnen:

Afbeelding-blok: uitlijningsinstellingen - geselecteerd

De verschillende uitlijningsopties die je kunt gebruiken zijn:

Links uitlijnen ⇢ Links uitlijnen
Centreren ⇢ Centreren
Rechts uitlijnen ⇢ Rechts uitlijnen
Grote breedte ⇢ Grote breedte
Volledige breedte ⇢ Volledige breedte
en Niet uitgelijnd

En zo zien de verschillende uitlijningsopties er uit met een afbeelding:

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 een 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” class=”wp-image-9603″/></figure></div><p>De titel is een beschrijving van de afbeelding. De alternatieve tekst – bekend als <em>Alt tekst</em> – 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).</p><p>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 <strong>Afbeelding bewerken</strong> kiest.</p><p>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 <strong>Alt tekst (alternatieve tekst)</strong> onder <em>Afbeeldingsinstellingen</em> in de blokinstellingen.</p><h2 id=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” class=”wp-image-9542″/></figure></div><h3 id=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