Toujours utiliser le chiffre pour publier des images

4

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 produite: <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 une marge plus large 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 le faire?

Modifier : j'ai remarqué que le comportement change dès que les onglets Visual et Texte sont activés dans l'éditeur, c'est-à-dire avant même de prévisualiser ou d’enregistrer le message. Peut-être que la bonne solution serait de forcer l’éditeur WordPress à toujours utiliser le shortcode [caption] , quoi qu’il en soit.

    
posée Borek Bernard 12.01.2015 - 10:45

2 réponses

5

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 de current_theme_supports( 'html5' ) dans le filtre ci-dessus, pour vérifier si vous avez quelque chose comme:

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

dans votre thème. Mais vous ne voudrez peut-être pas 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 .

Mettre à jour : 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 );
    
réponse donnée birgire 12.01.2015 - 11:17
0

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. Dans certaines circonstances, elle échoue et encapsule plus que l’image dans une figure.

J’imagine que c’est la raison pour laquelle on ne devrait pas analyser le code avec des expressions régulières.

Donc ... j'ai proposé une autre solution utilisant DOMDocument. C’est loin d’être aussi court que l’expression rationnelle, mais cela 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);
    
réponse donnée powerbuoy 31.01.2018 - 15:39

Lire d'autres questions sur les étiquettes