Afficher la légende (caption) de l’image à la une

Pour afficher l’image à la une avec sa légende,il y a sur stackoverflow des dizaines d’exemples, et Otto nous donne sur son site une vieille fonction bien pratique:

function be_display_image_and_caption() {
	echo '

<div class="featured-image">';
	the_post_thumbnail();
	echo '<span class="caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</span>';
	echo '</div>


';
}

Ici on affiche l’image à la une et sa légende.Le problème c’est que si la légende à une classe ,comme une background-color, et du padding, mais que l’utilisateur ne met pas de légende, on va quand meme voir un carré de la couleur de votre background-color, et de la hauteur et largeur de votre padding .
(cf image ci dessous)

carrepadding

Il va donc falloir entourer le tout d’une condition pour cacher entièrement la div s’il n’y a pas de légende :

function cc_display_image_and_caption() {
    $get_description = get_post(get_post_thumbnail_id())->post_excerpt;
	echo '
<div class="featured-image">';
	the_post_thumbnail('featured');
        if(!empty($get_description)){
	echo '<span class="wp-caption">' . get_post( get_post_thumbnail_id() )->post_excerpt . '</span>';
	}
        echo '</div>
';
}

Dans l’exemple ci dessus, j’utilise une taille d’image particulière que j’ai au préalable créee avec un add_image_size(‘featured’,…..) dans mon fichier functions.php.
Ensuite pour afficher notre légende, on inscrit simplement le nom de notre fonction à l’endroit souhaité

cc_display_image_and_caption() 

Une autre facon plus simple et de procéder au cas par cas, dans ses fichiers d’articles: On affiche le thumbnail, puis sa légende :

<?php the_post_thumbnail(); echo get_post(get_post_thumbnail_id())->post_excerpt; ?>

2 commentaires sur “Afficher la légende (caption) de l’image à la une

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.