web-dev-qa-db-fra.com

Toujours utiliser <figure> pour les images de post

Le comportement par défaut des images pleine largeur dans les publications est le suivant:

  • Si vous insérez une image seule, cette structure HTML est générée: <p><img/></p>
  • Si vous insérez une image avec une légende , la structure HTML est générée: <figure><img/><figcaption/></figure>

Par souci de style (je veux avoir une marge plus grande autour des images par rapport aux paragraphes standard), j'aimerais obtenir <figure> dans les deux cas, pas seulement lorsqu'il y a une légende. Comment faire?

Edit : une chose que j’ai remarquée, c’est que le comportement change dès que Visual et Text tabs sont activés dans l’éditeur, c’est-à-dire même avant la prévisualisation ou la sauvegarde de la publication. Peut-être que la bonne solution serait de forcer l’éditeur WordPress à toujours utiliser le shortcode [caption] quoi qu’il en soit.

imagesfiltersshortcode
4
Borek Bernard

Vous pouvez essayer le filtre image_send_to_editor :

/**
 * Wrap the inserted image html with <figure> 
 * if the theme supports html5 and the current image has no caption:
 */

add_filter( 'image_send_to_editor', 
    function( $html, $id, $caption, $title, $align, $url, $size, $alt ) 
    {
        if( current_theme_supports( 'html5' )  && ! $caption )
            $html = sprintf( '<figure>%s</figure>', $html ); // Modify to your needs!

        return $html;
    }
, 10, 8 );

où vous pouvez modifier le code HTML de l'image lorsqu'elle est insérée dans l'éditeur.

J'ai ajouté la vérification pour current_theme_supports( 'html5' ) dans le filtre ci-dessus, pour vérifier si vous avez quelque chose comme:

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

dans ton thème. Mais vous pouvez ne pas vouloir que ce rappel de filtre dépende de votre thème actuel, vous pouvez donc le supprimer si vous le souhaitez.

Vous pouvez également essayer le filtre get_image_tag .

Update : Voici la fonction utile unautop du commentaire de @ bueltge (pour une meilleure lisibilité):

// unautop for images     
function fb_unautop_4_img( $content )
{ 
    $content = preg_replace( 
        '/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', 
        '<figure>$1</figure>', 
        $content 
    ); 
    return $content; 
} 
add_filter( 'the_content', 'fb_unautop_4_img', 99 );
6
birgire

Je sais que c’est une vieille question avec une réponse acceptée, mais j’ai utilisé la version the_content de cette réponse et dans certaines circonstances, elle échoue et encapsule plus que l’image d’une figure.

J'imagine que c'est la raison pour laquelle il ne faut pas analyser le code avec des expressions régulières.

Alors ... je suis venu avec une autre solution en utilisant DOMDocument. Il est loin d'être aussi court que celui de l'expression rationnelle, mais il semble stable:

<?php
add_filter('the_content', function ($content) {
    # Prevent errors so we can parse HTML5
    libxml_use_internal_errors(true); # https://stackoverflow.com/questions/9149180/domdocumentloadhtml-error

    # Load the content
    $dom = new DOMDocument();

    # With UTF-8 support
    # https://stackoverflow.com/questions/8218230/php-domdocument-loadhtml-not-encoding-utf-8-correctly
    $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content);

    # Find all images
    $images = $dom->getElementsByTagName('img');

    # Go through all the images
    foreach ($images as $image) {
        $child = $image; # Store the child element
        $wrapper = $image->parentNode; # And the wrapping element

        # If the image is linked
        if ($wrapper->tagName == 'a') {
            $child = $wrapper; # Store the link as the child
            $wrapper = $wrapper->parentNode; # And its parent as the wrapper
        }

        # If the parent is a <p> - replace it with a <figure>
        if ($wrapper->tagName == 'p') {
            $figure = $dom->createElement('figure');

            $figure->setAttribute('class', $image->getAttribute('class')); # Give figure same class as img
            $image->setAttribute('class', ''); # Remove img class
            $figure->appendChild($child); # Add img to figure
            $wrapper->parentNode->replaceChild($figure, $wrapper); # Replace <p> with <figure>
        }
    }

    # Turn on errors again...
    libxml_use_internal_errors(false);

    # Strip DOCTYPE etc from output
    return str_replace(['<body>', '</body>'], '', $dom->saveHTML($dom->getElementsByTagName('body')->item(0)));
}, 99);
2
powerbuoy