Hoe een rand toevoegen aan je afbeelding?

Je wilt een rand toevoegen aan je afbeelding. In WordPress kun je op een eenvoudige manier een afbeelding toevoegen aan je artikel of je pagina. Als je zo’n afbeelding toevoegt dan wordt deze afbeelding toegevoegd zonder rand. In HTML / CSS taal spreken we over een border.

In dit artikel laten we je zien hoe je eenvoudig een rand aan je afbeelding kunt toevoegen. Er zijn verschillende mogelijkheden. Zo kun je gebruik maken van een plugin. Of je kunt zelf handmatig een klein stukje HTML code toevoegen aan je afbeelding. In dit artikel gaan we de HTML methode kiezen.

Allereerst moet je natuurlijk een afbeelding toevoegen aan je bericht of je pagina. Je klikt op Media toevoegen en zoekt de afbeelding op. Je klikt vervolgens op invoegen in bericht.

Vervolgens klik je op de optie tekst, naast Visueel.

Je ziet nu als het goed is zo’n soort code staan:

 <img class="border-image alignnone wp-image-8060 size-full" src="http://www.test.nl/wp-content/uploads/2016/03/WordPress-cursus-test.jpg" alt="WordPress cursus test" width="640" height="426" /> 

Kan zijn dat het niet exacte overeen komt, maar dat maakt eigenlijk voor het voorbeeld niet zoveel uit. Het belangrijkste is dat je achteraan een HTML element gaat toevoegen.

Dus achteraan net voor de afsluitende /> tag moet je deze code toevoegen:
style=”border: 3px solid #000;”

Dus uiteindelijk krijg je zo’n soort code:

 <img class="border-image alignnone wp-image-8060 size-full" src="http://www.test.nl/wp-content/uploads/2016/03/WordPress-cursus-test.jpg" alt="WordPress cursus test" width="640" height="426" style="border: 3px solid #000;"/> 

Hieronder zie je het resultaat van onze afbeelding:

De kleurcode kun je dan achteraf nog aanpassen. Deze staat nu standaard op zwart met een rand breedte van 3 pixels. Heb je vragen over hoe je een rand kunt toevoegen aan je afbeelding? Laat dan hieronder een reactie achter.