Removendo atributos de dimensão de imagem e legenda


9

Esta pergunta é um desdobramento desta discussão sobre a remoção de atributos de dimensão de imagens. O código da solução fornecida em que as obras de rosca muito bem, exceto que ele tem o efeito colateral que quaisquer [caption]códigos de acesso são distribuídos a partir da imagem.

Depois de várias horas pesquisando o código principal, descobri a causa disso. O plug-in TinyMCE wpeditimage, responsável por adicionar as [caption]verificações de código curto para atributos de largura no código curto e na imgtag. Se não os encontrar, basta remover a legenda. Como isso é feito 'on the fly' com javascript no editor TinyMCE, não consigo pensar em nenhum tipo de filtro do WordPress que resolva esse problema. Eu ficaria muito feliz em ser provado errado no entanto. :)

Como observação final, minha solução temporária foi usar o jQuery a seguir para remover todas as tags incorretas do lado do cliente. Isso, em conjunto com um filtro ativado img_caption_shortcodepara impedir que um estilo de largura seja usado lá, parece fazer o trabalho. Não é bonito, mas é um curativo por enquanto. Alguem 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');

Hmmm ... está sendo capaz de usar o editor visual um requisito? Se você só usar o editor de HTML, um filtro em img_caption_shortcode funciona bem ...
goldenapples

@ goldenapples, sim, não quero perder o editor visual, pois vou ter pessoas não técnicas editando o site. Obrigado pela sugestão embora. Alguma outra ideia?
Dominic P

Dominic, você pode fornecer o código para "um filtro no img_caption_shortcode para impedir que um estilo de largura seja usado lá"? É exatamente disso que preciso, mas não sei como escrever esse filtro.

@ Wendy, hmm, não consigo colar a coisa toda em um comentário. Se você quiser fazer outra pergunta e fornecer um link para ela, postarei como resposta.
Dominic P

Caso você não queira passar por tudo isso, basicamente modifiquei o exemplo do Codex .
Dominic P

Respostas:


18

pode não ser a resposta exata que você procura, mas acho que encontrei uma solução alternativa muito boa.

Iv'e pegou o código a seguir no CSS de tema onze e onze (que é imho perfeitamente 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 */
}

Isso foi suficiente para tornar todas as imagens responsivas (pelo menos aquelas incorporadas no conteúdo ...) Agora eu tenho imagens responsivas, mas quando a legenda é usada ainda tenho o mesmo problema, o que ocorre porque o tinyMCE adiciona um atributo de estilo ao recipiente 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 :-)


Ainda não tive tempo de testar isso completamente, mas já se mostrou bastante útil em outras áreas. Obrigado pela ajuda.
Dominic P

meu prazer :-)
Talbatz

Testado no IE9, parece não funcionar como pretendido!
Kuldeep Daftary

Isso entra em conflito com os navegadores antigos do IE
Tosh

realmente ótima solução! thx
emjay 26/10/2015
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.