Afbeelding toevoegen en plaatsen met wordpress blok

Om een afbeeldingsblok toe te voegen kun je op het plusteken klikken (1) of een enkele regel/afbeelding invoeren en vervolgens een afbeelding uploaden (2).

Een andere optie is om een afbeelding direct in de WordPress blok editor te slepen, waarna er automatisch een afbeeldingsblok wordt aangemaakt en de afbeelding op uw WordPress hosting omgeving verschijnt.

Opties voor uitlijnen afbeelding blok

Bovenaan het afbeeldingsblok een werkbalk heb je allerlei opties, waaronder de uitlijning van de afbeelding. Standaard is er geen uitlijning, maar je kunt dit veranderen in:

• links uitlijnen
• midden/gecentreerd
• rechts uitlijnen
• breed
• volle breedte.

Het is het beste om te beslissen hoe je het precies wilt uitlijnen, afhankelijk van de breedte en grootte van de afbeelding. Het verkleinen van de afbeelding is een optie om de afbeelding links of rechts naast de tekst uit te lijnen. Dit doe je door het blauwe bolletje ingedrukt te houden.

Soms veroorzaakt het werken met afbeeldingen in WordPress problemen. Bijvoorbeeld, de afbeelding kan links of rechts uitgelijnd zijn, maar de tekst kan er niet correct omheen staan. Ik raad aan om in dit geval met 2 kolommen te werken, dus bijvoorbeeld plaatje links, tekst rechts. Lees eventueel meer hieronder:

Alle afbeeldingen komen in de Mediabibliotheek

Alle afbeeldingen die in een WordPress omgeving worden geüpload, verschijnen in dezelfde Mediabibliotheek. Het is daarom belangrijk om je afbeeldingen (en mediabestanden) een relevante titel te geven, zodat ze ook met de zoekfunctie gevonden kunnen worden. Dit maakt het werken met afbeeldingen in WordPress al een stuk eenvoudiger.

Na het uploaden van een afbeelding verschijnt de afbeelding, met rechts de optie om de afbeelding te bewerken. Hier kunt u onder andere een relevante titel en alt-tekst invoeren. Vooral de alt-tekst is erg belangrijk voor de vindbaarheid van afbeeldingen in zoekmachines.

Meer opties voor plaatsen afbeelding

Het volgende is ook nog handig om te weten:

Media Bibliotheek

Als u deze optie selecteert, kunt u kiezen uit alle bestanden die u ooit naar de website hebt geüpload.

Invoegen via URL

Wordt alleen gebruikt als u een bestand van een andere locatie wilt gebruiken, vul hier de URL van de locatie in.

Galerij aanmaken

Met deze optie kunt u een galerij van afbeeldingen maken. Deze worden dan mooi bij elkaar in een galerijvorm weergegeven in het bericht of de pagina.

Maak een uitgelichte afbeelding

Als u deze optie selecteert kunt u een uitgelichte afbeelding toevoegen voor het bericht of de pagina.

Afbeeldingen invoegen met html

U kunt ook zelf een afbeelding invoegen zonder blok of met het html-blok door de volgende html-code te gebruiken:

<img src=>

bijvoorbeeld:

<img src=https://www.jouwdomein.nl/afbeeldingen/afbeelding01.jpg>

Het bestand “afbeelding01” moet al op de server staan. Dat kan met WordPress, maar ook met ftp en een ftp-programma. Je kunt vervolgens kiezen hoe groot u de afbeelding wilt hebben of waar je deze wilt laten uitlijnen. De manier waarop de tekst om de afbeelding wordt geplaatst is meestal vervelend. Het uitlijnen van tekst rond een afbeelding kan heel eenvoudig worden opgelost met html-codes.

Een afbeelding uitlijnen in html

U wilt een afbeelding uitlijnen aan, laten we zeggen, de linkerkant van het tekstgebied en u wilt dat de tekst om de afbeelding heenloopt. (Voorbeeld) Je kunt dat op verschillende manieren doen: met de html code style=”……” en align=”……”

De kortste code om een plaatje links uit te lijnen is door align=”left” achter het plaatje te zetten. De code wordt dan:

<img src=https://www.jouwdomein.nl/afbeeldingen/afbeelding01.jpg align=left>

Je kunt hier ook de waarden “right” en “center” gebruiken om rechts en in het midden uit te lijnen.

Afbeeldingsgroote instellen in html

Voeg deze code toe: width=”500″ height=”600″. Ik heb hier een aparte handleiding over gemaakt: