Tip: Uitgelichte afbeelding tonen in thema

Ben je een WordPress-thema aan het aanpassen of zelfs aan het ontwikkelen? Vaak is het een fijne optie om vanuit WordPress zelf de header van een bepaalde pagina te tonen. Het liefst doe je dit natuurlijk met een “featured image” (of “uitgelichte afbeelding“). Maar hoe toon je die op je WordPress-website?

Een uitgelichte afbeelding oproepen in een paginatemplate is eigenlijk heel simpel. Er zijn twee manieren.

Optie 1

Met onderstaand stukje PHP-code “spuugt” WordPress de uitgelichte afbeelding uit.

<?php the_post_thumbnail( $size, $attr ); ?>

Hiermee maakt WordPress zelf een image tag, het nadeel is dat WordPress dan automatisch de breedte en hoogte aan die tag mee geeft. Wil je meer eigen controle, dan is optie 2 beter.

Optie 2

Het volgende stukje code roept alléén de URL van de afbeelding op, je moet dus zelf een image tag in HTML schrijven.

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>" />
<?php endif; ?>

Je kijkt hier eerst óf er een uitgelichte afbeelding is gedefinieerd. Zo niet, dan toont WordPress niets.

Heb je wél een uitgelichte afbeelding ingesteld dan krijg je het volgende stukje HTML-code:

<img src="jouwafbeelding.jpg" />

Natuurlijk is het aan te raden om hier nog een bepaalde CSS-class aan mee te geven zodat je alle afbeeldingen vanuit één bestand bepaalde stijlelementen kunt meegeven.