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.

Visueel naar tekst

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:
WordPress cursus test

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.

2 reacties op “Hoe een rand toevoegen aan je afbeelding?

    • Maarten Hendrix zegt:

      Beste Wim, bedankt voor je reactie. Stuur ons even een mail met de specifieke pagina waar je de twee afbeeldingen naast elkaar wilt plaatsen, dan kijken wij er even naar.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.