Usar siempre la figura para publicar imágenes

Question

Usar siempre la figura para publicar imágenes

#1 de birgire (5 votos)
#2 de powerbuoy (0 votos)

4

El comportamiento predeterminado cuando se trata de imágenes de ancho completo en las publicaciones es el siguiente:

Si inserta una imagen sola, se produce esta estructura HTML: <p><img/></p>
Si inserta una imagen con un título , se produce la estructura HTML: <figure><img/><figcaption/></figure>

Por motivos de estilo (quiero tener un margen más amplio alrededor de las imágenes en comparación con los párrafos estándar), me gustaría obtener <figure> en ambos casos, no solo cuando hay un título. ¿Cómo hacerlo?

Editar : una cosa que noté es que el comportamiento cambia tan pronto como las pestañas Visual y Texto se cambian en el editor, es decir, Incluso antes de previsualizar o guardar la publicación. Tal vez la solución correcta sería forzar de alguna manera al editor de WordPress a usar siempre el código corto [caption] sin importar qué.

filters images shortcode

pregunta Borek Bernard 12.01.2015 - 10:45

2 respuestas

0

Sé que esta es una pregunta antigua con una respuesta aceptada, pero utilicé la versión the_content de esta respuesta y en algunas circunstancias realmente falla y envuelve más que la imagen en una figura.

Supongo que esta es la razón por la que uno no debe analizar código usando expresiones regulares.

Entonces ... se me ocurrió otra solución usando DOMDocument. No es tan corto como el de expresión regular pero se siente estable:

<?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);

respondido por el powerbuoy 31.01.2018 - 15:39

Lea otras preguntas en las etiquetas filters images shortcode

Filtro de administrador - Agregar descripción de tipo de publicación en la página Tipo de publicación Crear categoría solo para el tipo de publicación personalizada

score 5 · Accepted Answer

Puede probar el 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 );

donde puede modificar el html de la imagen cuando se inserta en el editor.

Agregué el cheque para current_theme_supports( 'html5' ) en el filtro de arriba, para verificar si tienes algo como:

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

en tu tema. Pero es posible que no desee que la devolución de llamada de este filtro dependa de su tema actual, por lo que puede eliminarlo si lo desea.

También puedes probar el filtro get_image_tag .

Actualización : aquí está la útil función de cierre de página del comentario de @bueltge (para una mejor lectura):

// 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 );