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.
Let op dat als je meer afbeeldingen tegelijk uploadt, dat deze allemaal geselecteerd zullen staan. Als je dus maar één hiervan op een bepaalde plek wilt invoegen, moet je eerst de rest de-selecteren of alle afbeeldingen zullen in je bericht worden ingevoegd.
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.
Tip: Het is ook mogelijk om je afbeelding in je bericht in te voegen en achteraf de instellingen te bewerken. Je kunt dit doen door op de afbeelding te klikken en op het potlood icoon te klikken. Het is daarbij alleen niet mogelijk om de titel en beschrijving aan te passen.
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 wordt aangeraden om de afbeeldingen via WordPress te uploaden en niet via FTP. Dit omdat er dan door WordPress bijgehouden zal worden waar de afbeelding zich bevindt en, stel dat je van domeinnaam verhuist of je permalinks aanpast, zal de afbeelding blijven werken. Terwijl dit waarschijnlijk niet het geval zal zijn met de hard-coded HTML paden; deze zullen naar een locatie wijzen waar de afbeelding niet langer te vinden is.
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.
Tip: je kunt er ook voor kiezen om alleen height of width in te vullen. De afbeelding zal in dat geval automatisch geschaald worden zodat er aan de hoogte of breedte voldaan wordt. Op die manier zorg je ervoor dat je afbeelding zijn originele verhoudingen behoudt.
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.