Eliminar atributos de dimensiones de imágenes y leyendas

4 nov 2011, 22:18:13
Vistas: 16.4K
Votos: 9

Esta pregunta surge a partir de esta discusión sobre cómo eliminar los atributos de dimensiones de las imágenes. El código proporcionado en ese hilo funciona muy bien, excepto que tiene el efecto secundario de que cualquier shortcode [caption] es eliminado de la imagen.

Después de varias horas revisando el código núcleo, encontré la causa de esto. El plugin TinyMCE wpeditimage, que es responsable de agregar el shortcode [caption], verifica los atributos de ancho en el shortcode y en la etiqueta img. Si no los encuentra, simplemente elimina la leyenda. Como esto se hace 'al vuelo' con javascript en el editor TinyMCE, no se me ocurre ningún filtro de WordPress que pueda abordar este problema. Sin embargo, estaría encantado de que me demostraran lo contrario. :)

Como nota final, mi solución temporal ha sido usar el siguiente código jQuery para eliminar todos los atributos problemáticos del lado del cliente. Esto, junto con un filtro en img_caption_shortcode para evitar que se use un estilo de ancho allí, parece funcionar. No es lo más elegante, pero es un parche por ahora. ¿Alguien tiene una mejor idea?

// Eliminar atributos width y height de img, video y object en el artículo principal para tener imágenes fluidas
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');
5
Comentarios

Hmmm... ¿es un requisito poder usar el editor visual? Si solo usas el editor HTML, un filtro en img_caption_shortcode funciona bien...

goldenapples goldenapples
6 nov 2011 16:10:01

@goldenapples, sí, no quiero perder el editor visual ya que tendré personas no técnicas editando el sitio. Gracias por la sugerencia de todos modos. ¿Alguna otra idea?

Dominic P Dominic P
8 nov 2011 02:36:19

Dominic, ¿puedes proporcionar el código para "un filtro en img_caption_shortcode para evitar que se use un estilo de ancho allí"? Esto es exactamente lo que necesito, pero no sé cómo escribir ese filtro.

User User
16 dic 2011 17:15:03

@Wendy, hmm, no puedo pegar todo en un comentario. Si quieres hacer otra pregunta y darme un enlace a ella, lo publicaré como respuesta.

Dominic P Dominic P
19 dic 2011 00:51:47

En caso de que no quisieras pasar por todo eso, básicamente solo modifiqué el ejemplo del Codex.

Dominic P Dominic P
19 dic 2011 00:58:45
Todas las respuestas a la pregunta 1
6
18

Puede que no sea la respuesta exacta que buscas, pero creo que acabo de encontrar una buena solución alternativa.

Tomé el siguiente código del CSS del tema Twenty Eleven (que es bastante responsivo en mi opinión):

/* Imágenes */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Imágenes fluidas para entradas, comentarios y widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Asegura que las imágenes con atributos height y width añadidos por WordPress se escalen correctamente */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Previene el estiramiento de imágenes a tamaño completo con atributos height y width en IE8 */
}

Esto fue suficiente para hacer que todas las imágenes fueran responsivas (al menos las incrustadas en el contenido...) Ahora tengo imágenes responsivas, pero cuando se usa el pie de foto (caption), todavía tengo el mismo problema, que ocurre porque tinyMCE añade un atributo de estilo al contenedor del pie con el ancho de la imagen. Para solucionarlo, solo tuve que añadir esto a mi CSS:

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

¡Listo! Funciona bien para mí, aunque puede que no funcione para imágenes destacadas.

Espero que esto le ayude a alguien :-)

3 ene 2012 12:33:44
Comentarios

No he tenido tiempo de probar esto completamente todavía, pero ya ha demostrado ser bastante útil en otras áreas. Gracias por la ayuda.

Dominic P Dominic P
21 feb 2012 08:45:04

un placer :-)

Talbatz Talbatz
22 feb 2012 13:19:08

¡Probado en IE9, no parece funcionar como se esperaba!

Kuldeep Daftary Kuldeep Daftary
24 jun 2013 14:16:03

Esto entra en conflicto con los navegadores antiguos de IE

Tosh Tosh
23 jun 2014 13:29:05

¡realmente una gran solución! gracias

emjay emjay
26 oct 2015 13:53:45

Esto me llevó a donde necesitaba, aunque solo usé width: auto y height: auto.

Kalnode Kalnode
7 ago 2018 19:38:40
Mostrar los 1 comentarios restantes