Sempre use figura para postar imagens

4

O comportamento padrão quando se trata de imagens de largura total em posts é o seguinte:

  • Se você inserir uma imagem sozinha, essa estrutura HTML será produzida: <p><img/></p>
  • Se você inserir uma imagem com uma legenda , a estrutura HTML será produzida: <figure><img/><figcaption/></figure>

Por motivos de estilo (quero ter uma margem maior em torno das imagens em comparação com os parágrafos padrão), gostaria de receber <figure> nos dois casos, não apenas quando houver uma legenda. Como fazer isso?

Editar : uma coisa que notei é que o comportamento muda assim que as guias Visual e Texto são trocadas no editor, ou seja, mesmo antes de visualizar ou salvar o post. Talvez a solução correta seja forçar o editor do WordPress a sempre usar o [caption] shortcode, não importa o que aconteça.

    
por Borek Bernard 12.01.2015 / 10:45

2 respostas

5

Você pode tentar o filtro 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 );

onde você pode modificar o html da imagem quando ela é inserida no editor.

Eu adicionei a verificação de current_theme_supports( 'html5' ) no filtro acima, para verificar se você tem algo como:

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

no seu tema. Mas talvez você não queira que esse filtro de retorno de chamada dependa do seu tema atual, para que você possa removê-lo, se quiser.

Você também pode experimentar o filtro get_image_tag .

Update : Aqui está a útil função de desaprovação do comentário do @ bueltge (para melhor legibilidade):

// 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 );
    
por birgire 12.01.2015 / 11:17
0

Eu sei que essa é uma pergunta antiga com uma resposta aceita, mas usei a versão the_content dessa resposta e, em algumas circunstâncias, ela realmente falha e envolve mais do que a imagem em uma figura.

Eu acho que esta é a razão pela qual não se deve analisar o código usando expressões regulares.

Então ... eu criei outra solução usando o DOMDocument. Não é nem de longe tão curto quanto o da regexp, mas parece estável:

<?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);
    
por powerbuoy 31.01.2018 / 15:39