Insérer une image avec légende

Le besoin

1.5 Insérer une image (<img>) avec légende:

• image et légende dans une balise <figure role = « group »>
• alt paramétrable
• si title présent, identique à alt

Résultat

• Si nécessaire, le champ texte alternatif doit être rempli par l’utilisateur
• Si le champ attribut title reste vide, l’attribut title n’est pas généré.
• Ajout de code dans functions.php du thème pour avoir la balise figure et le rôle=”group”.

Exemple d’une image informative avec légende

Sur le site la ville de Bayonne.

Méthode

RTE

• Dans l’éditeur : ajouter un média,
• Dans la bibliothèque : déposer ou sélectionner un fichier si l’image n’existe pas dans la bibliothèque
• Remplir le champ « Légende » avec : La place de Toros
• Remplir le champ « Texte alternatif » (<= 80 caractères) avec : La plaza de Toros, statue d’un taureau au centre, arènes de style néo mauresque.
• Insérer l’image dans l’article
• Si l’attribut title doit être rempli, modifier l’image et y coller le contenu du champ Texte alternatif, pour que l’attribut title soit identique à l’attribut alt.

 

Thème

Pour générer la balise <figure>, ajouter le code suivant dans le fichier « functions.php » du thème :

add_theme_support('html5', array('caption'));

Pour ajouter le role= « group », ajouter le code suivant dans le fichier « functions.php » du thème :

add_filter('img_caption_shortcode', 'my_img_caption_shortcode_filter',10,3);

function my_img_caption_shortcode_filter($val, $attr, $content = null)
{
    extract(shortcode_atts(array(
        'id'    => '',
        'align'    => '',
        'width'    => '',
        'caption' => ''
    ), $attr));
    
    if ( 1 > (int) $width || empty($caption) )
        return $val;

    $capid = '';
    if ( $id ) {
        $id = esc_attr($id);
        $capid = 'id="figcaption_'. $id . '" ';
        $id = 'id="' . $id . '" '; //aria-labelledby="figcaption_' . $id . '" '
    }
    $resultat = '<figure role="group" ' . $id . 'class="wp-caption ' . esc_attr($align) .'">';
    //$resultat .= 'style="width: '.((int) $width) . 'px">';
    $resultat .= do_shortcode( $content );
    $resultat .= '<figcaption ' . $capid . 'class="wp-caption-text"><span>' . $caption . '</span></figcaption>';
    $resultat .= '</figure>';
    return $resultat;
}

Code généré

<figure id="attachment_60" class="wp-caption alignnone" role="group">
<img class="wp-image-60 size-full" width="230" height="154" alt="La plaza de Toros, statue d'un taureau au centre, arènes de style néo mauresque." src="http://gta21.accesbilis.fr/wp-content/uploads/2015/06/plaza-de-toros.jpg" />
<figcaption id="figcaption_attachment_60" class="wp-caption-text">
<span>La plaza de Toros</span>
</figcaption>
</figure>