Filtrar para remover atributos de dimensão da imagem?


35

Estou trabalhando em um site com base em um modelo CSS de largura fluida que define uma largura máxima nas imagens para a largura da coluna que as contém, e preciso remover os atributos de dimensão de largura e altura embutidos que o WordPress adiciona às imagens.

Estou fazendo isso com minhas imagens em destaque com este filtro:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

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

Sei que posso aplicar o mesmo filtro ao conteúdo , se necessário. Mas existe uma maneira melhor de fazer isso?


Primeiro, obrigado pelo código muito útil. Ele funciona perfeitamente para remover os atributos de largura e altura da tag img, mas por algum motivo também parece remover o código de acesso da legenda, se houver um. Alguém sabe por que isso é e como corrigi-lo?
Dominic P

11
Talvez você deva postar isso como sua própria pergunta? Parece suficientemente distinto do meu que merece sua própria resposta. No entanto, tentarei responder ... para qualquer pessoa que encontre essa resposta e tenha o mesmo problema: Seu problema é que a função img_caption_shortcode, que processa o código de acesso da legenda, exige que uma largura seja especificada nos atributos do código de acesso da legenda. Caso contrário, ele pula a legenda e retorna o conteúdo dentro das [caption]tags shortcode.
goldenapples

Se você quiser usar códigos de acesso de legenda sem uma largura definida, será necessário definir sua marcação de legenda em uma função ligada ao filtro img_caption_shortcode. Escrever o código para uma função como essa é mais do que posso incluir nos comentários aqui.
goldenapples

@ goldenapples, obrigado pela sua resposta útil. Fiz o que você sugeriu e fez uma nova pergunta aqui: wordpress.stackexchange.com/questions/32931/… . Qualquer contribuição sobre isso seria muito apreciada. Como explico na pergunta, não tenho certeza se o filtro img_caption_shortcodeserá suficiente para resolver o problema.
Dominic P

11
Talvez eu esteja perdendo a imagem maior do que você está tentando fazer sem ver seu conteúdo real, mas isso não pode ser remediado usando apenas CSS? Se você estiver usando uma largura máxima em suas imagens, poderá superar o problema de altura adicionando uma altura: auto; às suas imagens de conteúdo.
binaryorganic

Respostas:


36

Obrigado a todos!

O filtro image_send_to_editor era o que eu estava procurando ... obrigado @ t31os por apontá-lo.

Aqui estão minhas funções agora.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

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

Isso remove os atributos de dimensão embutida das imagens recuperadas the_post_thumbnail()e impede que esses atributos sejam adicionados às novas imagens adicionadas ao editor. Não os remove das imagens recuperadas por meio de wp_get_attachment_imageoutras funções relacionadas (sem ganchos), mas esses casos podem ser processados ​​nos arquivos de modelos quando necessário.


11
Eu tive que remover o \ s da regex. Depois disso, funcionou bem. Acho que foi porque não havia espaço à direita após a última citação dupla na configuração de altura.
MattSlay

11
@MattSlay Sou eu quem tem problemas com a modificação permanente do conteúdo do site? Um tema responsivo não precisa modificar o conteúdo do site para que ele seja formatado corretamente. Eu voto para remover o filtro image_send_to_editore, em vez disso, adicioná-lo a the_content- como este post do blog . Isso separa a lógica da apresentação do conteúdo.
BFTrick #

11
@BFTrick - Parece uma questão de contexto para mim. Para um tema responsivo, eu concordo com você, porque você não pode depender do processamento do conteúdo existente dessa maneira e não sabe se o próximo tema instalado precisará desses atributos de dimensão. No meu caso, eu estava criando um aplicativo em que o tema era parte integrante do conteúdo, por isso escolhi o método menos intensivo de processador para processar as imagens quando elas foram adicionadas pela primeira vez. Mas você faz um bom argumento.
goldenapples

2
Aviso: Esta resposta quebra as legendas das imagens no WordPress 3.5.1.
com fio

5

Modificado este script um pouco. Obrigado pela ajuda!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
Cuidado, no entanto. A filtragem de the_content também filtrará os vídeos do youtube e qualquer outro atributo de largura / altura.
precisa saber é o seguinte

11
É verdade, mas isso pode ser uma coisa boa em um site responsivo. Se for necessário fazer isso por imagens, provavelmente também será necessário para outras mídias.
BFTrick

1

se você definir o tamanho da imagem em function.php como uma "galeria"

add_image_size( 'gallery', 200, 120, true );

você pode remover a largura e a altura do tamanho específico da imagem, como "galeria":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

A aplicação desse filtro the_contentserá acionada para todo o conteúdo. Isso será eficaz, mas poderá afetar o desempenho e o tempo de carregamento do seu site. Seria melhor se você dissesse ao WordPress para não inserir as tags de largura e altura embutidas ao inserir imagens em primeiro lugar.

Infelizmente, os scripts que realmente inserem a imagem são construídos em JavaScript e interagem com o editor TinyMCE wysiwyg. Pode haver uma maneira de conectar-se diretamente, mas não usando as add_filter()chamadas padrão .


11
Um filtro não image_send_to_editorfuncionaria aqui?
T31os

@ t31os - Eu acho que é isso que eu estava procurando! Não sei por que eu não vi esse gancho antes.
goldenapples

Bem, certamente espero que ajude, parece que pode fazer o truque ... informe e informe-nos. :)
t31os

@ t31os Sim, isso fez o truque! Obrigado! Vou postá-lo como resposta, a menos que você chegue primeiro.
goldenapples

2
Vá em frente, cara, eu não estou muito confuso, feliz por você ter encontrado uma solução ...;)
t31os
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.