Eliminar atributos de dimensiones de imágenes y leyendas
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');
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 :-)

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