web-dev-qa-db-fra.com

Insérer une image dans WordPress avec la balise <figure> et la fonction de légende HTML5

Lorsque je télécharge une image via le programme de téléchargement de média WordPress, puis que je l'insère dans l'éditeur, elle est également accompagnée des attributs width et height (eg width="440" height="340")

Mais maintenant, j'utilise le code suivant ( source ) pour remplacer les balises d'image par figure. Malheureusement, les attributs width et height sont manquants. Une idée de comment les insérer?

    function html5_insert_image( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
        $src  = wp_get_attachment_image_src( $id, $size, false );
        $html5 = "<figure id=\"post-$id media-$id\" class=\"align-$align\">";

        if ( $url ) {
        $html5 .= "<a href=\"$url\" class=\"image-link\"><img src=\"$src[0]\" alt=\"$alt\" /></a>";
        } else {
            $html5 .= "<img src=\"$src[0]\" alt=\"$alt\" />";
        }

        if ( $caption ) {
            $html5 .= "<figcaption>$caption</figcaption>";
        }

        $html5 .= "</figure>";
        return $html5;
    }
    add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );
functionsfilterseditorcustomization
1
Learning by doing

La largeur et la hauteur sont [1] et [2]. Donc, ceux-ci sont ajoutés sur la balise img. Si un thème a le support de légende html5 cela génère du HTML altéré si vous avez une légende (c'est assez standard de nos jours).

Corrigé pour vérifier s'il y a une légende et retourner le shortcode WP ou s'il n'y a pas de légende, utilisez le balisage en chiffres. Testé et fonctionne. 

function html5_insert_image( $html, $id, $caption, $title, $align, $url, $size, $alt ) {

    if( empty( $caption ) ) :

        $src  = wp_get_attachment_image_src( $id, $size, false );

        $html = "<figure id=\"post-$id media-$id\" class=\"align-$align\">";

        if ( $url ) {
            $html .= "<a href=\"$url\" class=\"image-link\"><img src=\"$src[0]\" width=\"$src[1]\" height=\"$src[2]\" alt=\"$alt\" /></a>";
        } else {
            $html .= "<img src=\"$src[0]\" width=\"$src[1]\" height=\"$src[2]\" alt=\"$alt\" />";
        }

        $html .= "</figure>";

    endif;

    return $html;

}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );
0
Christina