[Astuce] Afficher la description d’une image en front-end (Créer un compte)

Bonjour,

Je souhaiterais faire partager à la communauté une fonction qui permet d’afficher le contenu du champs description d’une image. Je précise : je n’ai rien codé, j’ai juste assemblé ; mais comme je travaillais sur l’affichage des images et que je ne voulais pas d’un plugin encombrant pour quelque chose qui ne l’est pas, j’ai pas mal galéré, c’est-à-dire navigué d’une certain façon sur le net pour obtenir ce que je voulais. Et je me suis dit que ça pouvait intéresser d’autres noobs comme moi…

Ce champs « description » est rarement rempli car rares sont les thèmes qui l’utilisent. Même ceux par défaut de WP n’affichent pas la description. Le plus incroyable ce sont certains avis qu’on peut lire ici et ailleurs : ça ne sert à rien de remplir la description car de toute façon ça ne sera visible que pour le back-end. Dans un certain sens, c’est vrai.

Mais l’intérêt très mineur que l’on peut trouver à ce champs prend tout de suite de l’ampleur quand on réussit à faire afficher son contenu en front-end. Il peut, par exemple, servir à indiquer :
– les crédits d’une photo
– les caractéristiques d’une oeuvre d’art (matière, dimensions, …) ou d’une photo (résolution, type d’appareil utilisé, etc.)
ou toute autre indication à votre convenance…

Evidemment, les Custom Fields pourraient très bien remplir ce rôle mais je trouvais intéressant de pouvoir rendre utile un champs passé à la trappe.

Donc, en reprenant la fonction de CreativJuiz qui propose d’ailleurs une excellente mise à jour des balises figure et figcaption pour l’HTML5, on peut y insérer le bout de code trouvé chez Webcitizenmag. Et le tout est à mettre évidemment dans le fichier functions.php :

/** 
 * Filtre sur le shortcode pour un code « HTML5 Compliant » – by Creativjuiz
 * @return text HTML décrivant un contenu de type image
 **/ 
 add_filter(‘img_caption_shortcode’, ‘img_caption_shortcode_html5_compliant’,10,3);  
 if ( !function_exists(‘img_caption_shortcode_html5_compliant’)) {  
    function img_caption_shortcode_html5_compliant($val, $attr, $content = null)  
    {  
        extract(shortcode_atts(array(  
            ‘id’    =>  »,  
            ‘align’ =>  »,  
            ‘width’ =>  »,  
            ‘caption’ =>  »  
        ), $attr));  
        if ( empty ($caption) || 1 > (int)$width )  
            return $val;
// Grab ID to query post_content [description] field for image – by Webcitizenmag
	preg_match(‘/([d]+)/’, $id, $matches);

	$description =  »;
	if ($matches[0]) {

		global $wpdb;
		$custom_description = $wpdb->get_row(« SELECT post_content FROM $wpdb->posts WHERE ID = {$matches[0]}; »);

		if ($custom_description->post_content) {

			$description = ‘<p class="wp-custom-description">‘. $custom_description->post_content . ‘</p>‘;

		}
	}			
        $capid =  »;  
        if ( $id ) {  
            $id = esc_attr($id);  
            $capid = ‘id= »figcaption_’. $id . ‘ » ‘;  
            $id = ‘id= »‘ . $id . ‘ » aria-labelledby= »figcaption_’ . $id . ‘ » ‘;  
        }  
        return ‘<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: '  
        . (10 + (int) $width) . 'px">‘ . do_shortcode( $content ) . $description . ‘<figcaption ' . $capid  
        . 'class="wp-caption-text">‘ . $caption . ‘</figcaption></figure>‘; 
    }  
} //endif !function_exists

Il faut ensuite éditer le fichier CSS principal de notre thème pour configurer la nouvelle classe, par exemple :

.wp-custom-description {
margin: -5px 5px 0 0;
text-align: right;
font-size: 10px;
font-style: italic;}

P.S. : j’ai eu un décalage avec la balise figure avec le thème Twentyeleven. En l’insérant dans le reset qui est proposé au début de la feuille de style, ce défaut a disparu.