Het is in WordPress natuurlijk ook mogelijk om afbeeldingen te gebruiken in je pagina’s en berichten. De vraag is alleen hoe je dit precies kunt doen: daarvoor is dit artikel. Hierin zullen de verschillende mogelijkheden stap voor stap worden behandeld.

“Media toevoegen” optie

De snelste manier om een afbeelding toe te voegen, is om in de visual editor van WordPress de optie “Media toevoegen” te gebruiken. Deze is links bovenin het scherm te vinden (onder het titel veld).

Als je op deze knop klikt, opent er een venster waarin je kunt kiezen welke afbeelding je wilt gebruiken. Je hebt hierbij twee mogelijkheden om de afbeelding te kiezen: vanuit je mediabibliotheek of door een nieuwe afbeelding te uploaden. In beiden gevallen komt het gebruik op hetzelfde neer, behalve dat je bij het uploaden eerst de afbeelding op je computer moet selecteren en uploaden. Nadat dit gedaan is, zal de afbeelding in je mediabibliotheek worden weergegeven en standaard geselecteerd zijn.

Als je geen afbeelding geüpload had, omdat hij al in je mediabibliotheek stond, dan hoef je hem nu alleen te selecteren. Nadat de juiste afbeelding geselecteerd is, zal je aan de rechterkant een aantal gegevens over de afbeelding vinden, waaronder een aantal opties die je kunt instellen:

URL: Op dit veld na, is alles naar eigen wensen aan te passen. Hier staat namelijk het pad naar de afbeelding ingesteld.
Titel: Hier kun je de titel van je afbeelding invullen. Standaard zal hier de bestandsnaam ingevuld staan. Deze titel wordt in de mediabibliotheek gebruikt om aan te geven om welk bestand het gaat. Het is dus verstandig om afbeeldingen een unieke naam te geven zodat ze later, als het nodig is, goed terug te vinden zijn in je mediabibliotheek.
Onderschrift: Indien nodig kan je hier een korte uitleg bij de afbeelding opgeven. Deze zal vervolgens onder de afbeelding worden geplaatst.
Alt-tekst: Dit is de tekst die wordt weergegeven als de afbeelding om een of andere reden niet geladen kan worden. Vaak is het handig om een beschrijvende tekst van de afbeelding in te vullen, zodat je bezoekers toch weten wat er in de afbeelding te zien zou moeten zijn.
Beschrijving: Een lange(re) beschrijving bij je afbeelding. Deze wordt vaak weergegeven als je een thumbnail gebruikt die vervolgens naar een grotere afbeelding linkt.
Uitlijning: Hier kun je aangeven of je de afbeelding links, rechts of in het midden uitgelijnd wilt hebben. Het is afhankelijk van je thema hoe dit er precies uit ziet, dus probeer het eens uit. Je kunt er ook voor kiezen om “geen” uitlijning te hebben. In dat geval wordt de afbeelding in de regel geplaatst. Dit gebruik je meestal alleen voor kleine afbeeldingen die niet veel groter zijn dan een letter.
Link naar: Hier kan je aangeven wat er gebeurt als er op de afbeelding geklikt wordt. Standaard zal dit op “Mediabestand” ingesteld zijn en dit betekent dat de bezoeker de afbeelding te zien zal krijgen in het formaat zoals hij geüpload is. De andere opties die je hebt, zijn “Bijlagepagina”, wat inhoudt dat de gebruiker doorgestuurd zal worden naar een pagina waarop de afbeelding te zien zal zijn, “Aangepaste URL”, wat inhoudt dat je een eigen link kunt opgeven waar de bezoeker heen gestuurd zal worden (bijvoorbeeld een andere website of pagina), en tenslotte is er ook nog “Geen”, wat inhoudt dat er niet op de afbeelding geklikt kan worden.
Afmetingen: Afhankelijk van de grootte van je afbeelding, kun je hier uit drie (of dus minder) standaard opties kiezen:
Thumbnail: Je afbeelding zal in het formaat van 150×150 pixels worden ingevoegd. Let er wel op dat de afbeelding wordt bijgesneden als deze niet van zichzelf vierkant is.
Gemiddeld: Hierbij wordt je afbeelding in het formaat van 300×300 pixels ingevoegd. Let er wederom op dat hij zal worden bijgesneden als de afbeelding niet vierkant is.
Volledige grootte: Hierbij wordt de afbeelding op volledige grootte ingevoegd. De afmetingen hiervan hangen af van de afmeting van de gebruikte afbeelding.

Als alles naar wensen is ingesteld, klik je rechts onderin op “Invoegen in bericht” en de afbeelding zal aan je bericht worden toegevoegd. Vervolgens kun je de afbeelding verslepen om hem op een betere plek te krijgen. Let er hierbij wel op dat de editor vaak niet de exacte plek van de afbeelding laat zien zoals hij op de website zal zijn. Het is dus verstandig om afbeeldingen eerst te controleren door een conceptversie van je bericht of pagina te maken en deze te bekijken. Wanneer alles goed uitgelijnd is, kun je het daarna natuurlijk publiceren.

Ook kun je achteraf de grootte van de afbeelding bijstellen door erop te klikken en de vierkantjes rondom te verslepen. Zo kan je de afbeelding net iets beter laten passen dan wanneer je gebruik maakt van de standaard beschikbare formaten.

FTP en HTML

Het is ook mogelijk om afbeeldingen te gebruiken zonder dat je ze aan de mediabibliotheek hoeft toe te voegen in WordPress. Hiervoor heb je een FTP programma nodig en wat verstand van HTML.

Allereerst start je je FTP programma en kies je een map waarin je de afbeelding wilt uploaden (bijvoorbeeld /wp-content/uploads). Upload vervolgens de afbeelding en onthoud en onthoud hiervan de plek als je afwijkt van /wp-content/uploads.

Vervolgens log je in op je website en maak je een bericht of pagina aan. Hierna ga je in de tekst-modus van de editor en voeg je de volgende HTML code toe:

<img src=”pad_naar_afbeelding” class=”klasse” alt=”alt_tekst” width=”breedte” height=”hoogte” />

Hierin moet je zelf een aantal dingen aanpassen:
pad_naar_afbeelding: Hier moet je het volledige pad naar de afbeelding invullen, bijvoorbeeld www.wpsitemaken.nl/afb/afbeelding.png.
klasse: Het is afhankelijk van je thema wat je hier precies in moet vullen. De klasse heeft te maken met de uitlijning van je afbeelding, dus het is verstandig om een afbeelding in te voegen via de ‘Media toevoegen’ optie en vervolgens in de HTML te kijken welke klasse er gebruikt wordt.
alt_tekst: Hier kan je de alternatieve tekst invoegen die wordt weergegeven als de afbeelding niet geladen kan worden.
width: De breedte van de afbeelding in pixels.
height: De hoogte van de afbeelding in pixels.

Als je wilt dat er geklikt kan worden op de afbeelding, kan je de volgende code om de afbeelding plaatsen:

<a href=”link”> </a>

Hierbij kun je als link meerdere opties opgeven zoals het pad naar de afbeelding of de link naar een andere pagina of website.

De code zal er uiteindelijk als volgt uit zien:

<a href=”link”><img src=”pad_naar_afbeelding” class=”klasse” alt=”alt_tekst” width=”breedte” height=”hoogte” /></a>

Als je nu terug gaat naar de visuele editor, en je alles goed hebt gedaan, zal je de afbeelding in je bericht moeten zien staan.

Afbeelding verwijderen uit bericht

Het is natuurlijk om mogelijk om een afbeelding weer te verwijderen. Om dit te doen, klik je op de afbeelding en klik je op het kruisje dat dan verschijnt. De afbeelding zal dan direct worden verwijderd.

Michel Kraaijeveld

Michel Kraaijeveld is oprichter van WPsitemaken. Hij is ervan overtuigd dat het voor iedereen mogelijk moet zijn om een eigen website te maken, zonder lastige handleidingen door te hoeven nemen. Zelf is hij al 6 jaar actief met WordPress en probeert zijn kennis op een simpele manier over te brengen aan anderen.