Parar wordpress de codificar img largura e altura atributos


16

Gostaria de saber se existe uma maneira simples de parar o WordPress de codificar automaticamente os atributos de altura e largura da imagem, além de usar regex ...

Como estou usando uma grade flexível para o meu projeto (quem não é!), Isso está causando alguns problemas de imagem.

Respostas:


7

Você pode obter o URL da imagem em destaque e adicioná-lo ao seu conteúdo manualmente, por exemplo:

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

só funciona para páginas wordpress codificadas, que são inúteis para um CMS.
..

Lembre-se: esse método evita imagens responsivas desde o WP 4.4, pois não inclui o srcsetatributo.
Drivingralle

13

Você pode remover os atributos de largura e altura filtrando a saída da image_downsizefunção encontrada em wp-includes/media.php. Para fazer isso, você escreve sua própria função e a executa através do arquivo functions.php do seu tema ou como um plug-in.

Exemplo:

Remova o widthe heightatributos.

/**
 * 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;
}

Anexe a nova função ao 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 );

Além disso, não se esqueça de dimensionar as imagens corretamente no seu 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 isso ajude você.

Felicidades,


Isso remove srcset, sizese outros atributos de imagem sensível infelizmente. :( Este é o meu sollution atual, que reconstrói os atributos de volta: gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239
Petr Cibulka

10

Você pode usar o post_thumbnail_htmlfiltro para remover o atributo:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Coloque isso no seu functions.phparquivo


Ainda funciona como um encanto.
Rahul

2

Você pode substituir estilos / atributos embutidos com !important:

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

Não é a solução mais limpa, mas resolve o seu problema.


Por alguma razão, a aula wp-post-imagenão foi incluída nas minhas imagens. Em vez disso, eu tinha algo parecido wp-image-26. Eu tive que usar outro seletor, mas a ideia funcionou.
Pier

2

A melhor solução é colocar o jquery no rodapé

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});

Alguma explicação sobre por que essa é a "melhor" solução?
Kit Johnson

1
porque às vezes "add_filter" não fazer o trabalho onde quer que seja por isso que eu disse
Asad Ali

0

Solução CSS:

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

Isso permite que imagens responsivas funcionem como deveriam, enquanto você mantém os atributos width e height no elemento img, o que provavelmente é melhor para navegadores mais antigos, desempenho e / ou para passar validadores HTML.

Solução PHP:

Isso impedirá a adição de atributos de largura / altura em qualquer mídia recém-adicionada no editor WP (via 'Adicionar mídia'). Para sua informação, também pode afetar as legendas da sua imagem!

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 );
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.