Evite que WordPress codifique los atributos de ancho y alto de img

16

Me pregunto si hay una manera simple de detener WordPress automáticamente codificando automáticamente los atributos de altura y anchura de la imagen, aparte de usar expresiones regulares ...

Como estoy usando una cuadrícula flexible para mi proyecto (¡quién no!), Esto está causando algunos problemas de imagen funky.

Richard Sweeney
fuente

Respuestas:

7

Puede obtener la URL de la imagen destacada y agregarla a su contenido manualmente, por ejemplo:

<?php 
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' ); 

if ($image) : ?>
    <img src="<?php echo $image[0]; ?>" alt="" />
<?php endif; ?> 
Vilius Paulauskas
fuente
solo funciona para páginas de wordpress codificadas, lo que no sirve para un CMS.
S ..
Recuerde: este método evita las imágenes receptivas desde WP 4.4 porque no incluye el srcsetatributo.
Drivingralle
13

Puede eliminar los atributos de ancho y alto filtrando el resultado de la image_downsizefunción que se encuentra en wp-includes/media.php. Para hacer esto, debe escribir su propia función y ejecutarla a través del archivo functions.php de su tema o como un complemento.

Ejemplo:

Eliminar los atributos widthy height.

/**
 * This is a modification of image_downsize() function in wp-includes/media.php
 * we will remove all the width and height references, therefore the img tag 
 * will not add width and height attributes to the image sent to the editor.
 * 
 * @param bool false No height and width references.
 * @param int $id Attachment ID for image.
 * @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
 * @return bool|array False on failure, array on success.
 */
function myprefix_image_downsize( $value = false, $id, $size ) {
    if ( !wp_attachment_is_image($id) )
        return false;

    $img_url = wp_get_attachment_url($id);
    $is_intermediate = false;
    $img_url_basename = wp_basename($img_url);

    // try for a new style intermediate size
    if ( $intermediate = image_get_intermediate_size($id, $size) ) {
        $img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
        $is_intermediate = true;
    }
    elseif ( $size == 'thumbnail' ) {
        // Fall back to the old thumbnail
        if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
            $img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
            $is_intermediate = true;
        }
    }

    // We have the actual image size, but might need to further constrain it if content_width is narrower
    if ( $img_url) {
        return array( $img_url, 0, 0, $is_intermediate );
    }
    return false;
}

Adjunte la nueva función al image_downsizegancho:

/* Remove the height and width refernces from the image_downsize function.
 * We have added a new param, so the priority is 1, as always, and the new 
 * params are 3.
 */
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Además, no olvide escalar las imágenes correctamente en su CSS:

/* Image sizes and alignments */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

Espero que esto te ayude.

Salud,

byjml
fuente
Esto elimina srcset, sizesy desafortunadamente , otros atributos de imagen receptiva. :( Esta es mi solución actual, que reconstruye los atributos: gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239
Petr Cibulka
10

Puede usar el post_thumbnail_htmlfiltro para eliminar el atributo:

function remove_img_attr ($html) {
    return preg_replace('/(width|height)="\d+"\s/', "", $html);
}

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Coloque esto en su functions.phparchivo

Yi Jiang
fuente
Todavía funciona como un encanto.
Rahul
2

Puede anular los estilos / atributos en línea con !important:

.wp-post-image {
    width: auto !important; /* or probably 100% in case of a grid */
    height: auto !important; 
}

No es la solución más limpia, pero resuelve su problema.

Rogier van der Linde
fuente
Por alguna razón, la clase wp-post-imageno estaba incluida en mis imágenes. En cambio, tenía algo así wp-image-26. Tuve que usar otro selector pero la idea funcionó.
Muelle
2

La mejor solución es colocar jquery en el pie de página

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});
Asad Ali
fuente
¿Alguna explicación sobre por qué esta es la "mejor" solución?
Kit Johnson
1
porque a veces "add_filter" no funciona donde quieres que sea, por eso dije
Asad Ali
0

Solución CSS:

img[class*="align"], img[class*="wp-image-"] {
    width: auto;
    height: auto;
}

Esto permite que las imágenes receptivas funcionen como deberían, mientras que usted mantiene los atributos de ancho y alto en el elemento img, lo que probablemente sea mejor para navegadores antiguos, rendimiento y / o para pasar validadores HTML.

Solución PHP:

Esto evitará la adición de atributos de ancho / alto en cualquier medio recién agregado en el editor de WP (a través de 'Agregar medios'). Para su información, también puede afectar los subtítulos de sus imágenes.

function remove_widthHeight_attribute( $html ) {
   $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
   return $html;
}

add_filter( 'post_thumbnail_html', 'remove_widthHeight_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_widthHeight_attribute', 10 );
MarsAndBack
fuente