Eliminando los atributos de las dimensiones de la imagen y los subtítulos

9

Esta pregunta es una derivación de esta discusión sobre la eliminación Atributos de dimensión a partir de imágenes. El código de solución provisto en ese hilo funciona muy bien, excepto que tiene el desafortunado efecto secundario de que cualquier código corto de [caption] está separado de la imagen.

Después de varias horas de investigar el código del núcleo, encontré la causa de esto. El complemento wpeditimage TinyMCE que se encarga de agregar el código corto [caption] verifica los atributos de ancho en el código corto y la etiqueta img . Si no los encuentra, simplemente quita la leyenda. Dado que esto se hace 'sobre la marcha' con javascript en el editor TinyMCE, no puedo pensar en ningún tipo de filtro de WordPress que aborde este problema. Sin embargo, estaría muy feliz de estar equivocado. :)

Como nota final, mi solución temporal ha sido utilizar el siguiente jQuery para eliminar todas las etiquetas del lado del cliente. Esto, junto con un filtro en img_caption_shortcode para evitar que se use un estilo de ancho allí, parece hacer el trabajo. No es bonito, pero es una curita por ahora. ¿Alguien tiene una mejor idea?

// 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');
    
pregunta Dominic P 04.11.2011 - 21:18

1 respuesta

18

puede que no sea la respuesta exacta que estás buscando, pero creo que acabo de encontrar una solución bastante buena.

Iv'e tomó el siguiente código del CSS del tema veintiocho (que responde perfectamente):

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

Esto fue suficiente para hacer que todas las imágenes respondan (al menos aquellas incluidas en el contenido ...) Ahora tengo imágenes de respuesta, pero cuando se usa el título, todavía tengo el mismo problema, eso ocurre porque el tinyMCE agrega un atributo de estilo al contenedor de títulos con el ancho de la imagen. Para arreglar que todo lo que tenía que hacer es agregar esto a mi CSS:

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

¡Hecho! funciona bien para mí, aunque podría no funcionar con las imágenes destacadas.

Espero que esto ayude a alguien :-)

    
respondido por el Talbatz 03.01.2012 - 11:33

Lea otras preguntas en las etiquetas