Removendo atributos de dimensão de imagem e legenda

Question

Removendo atributos de dimensão de imagem e legenda

#1 resposta do Talbatz (18 votos)

9

Esta questão é um desdobramento da discussão sobre a remoção atributos de dimensão das imagens. O código de solução fornecido nesse encadeamento funciona muito bem, exceto pelo efeito colateral que todos os códigos de% [caption] são distribuídos a partir da imagem.

Depois de várias horas pesquisando o código principal, descobri a causa disso. O plugin wpeditimage TinyMCE responsável por adicionar o [caption] shortcode verifica os atributos de largura no shortcode e a tag img . Se não encontrá-los, basta remover a legenda. Desde então, isso é feito 'on the fly' com javascript no editor TinyMCE, não consigo pensar em qualquer tipo de filtro WordPress que iria resolver este problema. Eu ficaria muito feliz em ser provado errado no entanto. :)

Como nota final, minha solução temporária tem sido usar o seguinte jQuery para remover todas as tags ofensivas do lado do cliente. Isso, junto com um filtro em img_caption_shortcode para impedir que um estilo de largura seja usado lá, parece fazer o trabalho. Não é bonito, mas é um band-aid por agora. Alguém tem uma ideia melhor?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

filters images

por Dominic P 04.11.2011 / 21:18

1 resposta

Tags filters images

Como eu sei o tipo de post atual quando estou post.php em admin? Obter descrição da imagem

score 18 · Accepted Answer

pode não ser a resposta exata que você procura, mas acho que acabei de encontrar uma boa solução.

Iv'e pegou o seguinte código do CSS de vinte e onze temas (que é impo responsavelmente responsivo):

/* Images */
.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 */
}

Isto foi enuff para tornar todas as imagens responsivas (pelo menos aquelas incorporadas no conteúdo ...) Agora eu tenho imagens responsivas, mas quando a legenda é usada eu ainda tenho o mesmo problema, que ocorre porque o tinyMCE adiciona um atributo de estilo ao contêiner de legenda com a largura da imagem. Para corrigir isso, tudo o que eu precisava fazer era adicionar isso ao meu CSS:

            .wp-caption { max-width: 100%; }

Feito! funciona bem para mim, embora possa não funcionar para imagens em destaque.

Espero que isso ajude alguém: -)