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

La plaza de Toros, statue d'un taureau au centre, arènes de style néo mauresque.
La plaza de Toros

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>

Laisser un commentaire

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