Filtro para eliminar atributos de dimensiones de imágenes

Question

Filtro para eliminar atributos de dimensiones de imágenes

18 dic 2010, 06:54:51

Vistas: 28.7K

Votos: 36

Estoy trabajando en un sitio basado en una plantilla CSS de ancho fluido que establece un ancho máximo en las imágenes según el ancho de la columna que las contiene, y necesito eliminar los atributos de dimensiones inline width y height que WordPress agrega a las imágenes.

Lo estoy haciendo con mis imágenes destacadas con este filtro:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    // Elimina los atributos width y height del HTML
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Sé que puedo aplicar el mismo filtro a the_content, si es necesario. Pero ¿hay una mejor manera de hacer esto?

goldenapples

9.26K

imágenes filtros miniaturas de publicación

Comentarios

Quizás me estoy perdiendo el panorama general de lo que intentas hacer sin ver tu contenido real, pero ¿no se puede solucionar esto usando solo CSS? Si estás usando un max-width en tus imágenes, deberías poder resolver el problema de altura añadiendo un height: auto; a las imágenes de tu contenido.

binaryorganic

1 may 2012 20:11:32

@binaryorganic - Sí, ahora me doy cuenta de que se puede... al menos en cualquier navegador que me preocupe, las propiedades css width y height deberían sobrescribir los atributos width en línea. Cuando estaba trabajando originalmente en esto, había problemas en versiones antiguas de IE con esta funcionalidad, aunque no recuerdo exactamente cuáles eran. Y en cualquier caso, parecía mejor no estar generando muchas propiedades dimensionales adicionales y tener que sobrescribirlas.

goldenapples

2 may 2012 00:51:04

En primer lugar, gracias por el código tan útil. Funciona perfectamente para eliminar los atributos width y height de la etiqueta img, pero por alguna razón también parece eliminar el shortcode de caption si hay uno. ¿Alguien sabe por qué ocurre esto y cómo corregirlo?

Dominic P

2 nov 2011 00:46:03

¿Quizás deberías publicar esto como una pregunta propia? Parece lo suficientemente distinto de la mía como para merecer su propia respuesta. Sin embargo, intentaré responder... para cualquier otra persona que encuentre esta respuesta y tenga el mismo problema:

Tu problema es que la función img_caption_shortcode, que procesa el shortcode de caption, requiere que se especifique un ancho en los atributos del shortcode de caption. De lo contrario, omite el caption por completo y simplemente devuelve el contenido envuelto dentro de las etiquetas del shortcode [caption].

goldenapples

3 nov 2011 14:43:38

Si deseas poder usar shortcodes de caption sin un ancho definido, tendrás que definir tu marcado de caption en una función enganchada al filtro img_caption_shortcode. Sin embargo, escribir el código para una función así es más de lo que puedo incluir en los comentarios aquí.

goldenapples

3 nov 2011 14:50:56

Mostrar los 1 comentarios restantes

Todas las respuestas a la pregunta

Comentarios

Tuve que eliminar la \s de la expresión regular. Después de eso, funcionó bien. Creo que fue porque no tenía un espacio después de la última comilla en la configuración de altura.

MattSlay

10 oct 2012 17:55:02

@MattSlay ¿Soy solo yo el que tiene un problema con modificar permanentemente el contenido del sitio? Un tema responsivo no debería tener que modificar el contenido del sitio web para que se formatee correctamente. Voto por eliminar el filtro de image_send_to_editor y en su lugar agregarlo a the_content - como en esta publicación de blog. Esto separa la lógica de presentación del contenido.

BFTrick

1 nov 2012 15:53:50

@BFTrick - Parece una cuestión de contexto para mí. Para un tema responsivo, estaría de acuerdo contigo porque no puedes depender de que el contenido existente haya sido procesado de esta manera, y no sabes si el próximo tema instalado necesitará esos atributos de dimensión.

En mi caso, estaba construyendo una aplicación donde el tema era integral al contenido, así que elegí el método menos intensivo en procesamiento de procesar las imágenes cuando se agregaban por primera vez. Pero haces un buen punto.

goldenapples

2 nov 2012 01:43:44

Advertencia: Esta respuesta afecta los subtítulos de imágenes en WordPress 3.5.1.

wired

25 abr 2013 02:41:26

Modifiqué un poco este script. ¡Gracias por la ayuda!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Solo para el framework Genesis  
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// También elimina los tamaños de imagen adjuntos
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

MikeNGarrett

2.67K

5 ene 2011 20:57:00

Comentarios

Sin embargo, ten cuidado. Filtrar the_content también afectará a los videos de YouTube y cualquier otro atributo de ancho/alto.

MikeNGarrett

5 ene 2011 23:59:35

Cierto, pero eso puede ser algo bueno en un sitio responsivo. Si necesitas hacerlo para imágenes, probablemente también necesites hacerlo para otros medios.

BFTrick

1 nov 2012 15:50:00

si defines un tamaño de imagen en function.php como "gallery"

add_image_size( 'gallery', 200, 120, true );

puedes eliminar el ancho y alto de un tamaño de imagen específico como "gallery":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

Tohid Golkar

61

29 ene 2013 08:40:42

Aplicar ese filtro a the_content lo activará para todo el contenido. Esto será efectivo, pero podría afectar el rendimiento y tiempo de carga de tu sitio. Sería mejor si le indicaras a WordPress que simplemente no inserte las etiquetas de ancho y alto en línea cuando insertas las imágenes en primer lugar.

Desafortunadamente, los scripts que realmente insertan la imagen están construidos en JavaScript e interactúan con el editor wysiwyg TinyMCE. Podría haber una forma de conectarse directamente, pero no usando las llamadas estándar add_filter().

EAMann

32.2K

18 dic 2010 07:57:47

Comentarios

¿No funcionaría un filtro en image_send_to_editor aquí?

t31os

18 dic 2010 17:50:13

@t31os - ¡Creo que eso es exactamente lo que estaba buscando! No sé por qué no había visto ese hook antes.

goldenapples

18 dic 2010 18:17:09

Bueno, ciertamente espero que te ayude, parece que podría ser la solución... cuéntanos cómo te va y dinos si funcionó. :)

t31os

18 dic 2010 18:43:23

@t31os ¡Sí, eso funcionó! ¡Gracias! Lo publicaré como respuesta, a menos que lo hagas primero.

goldenapples

19 dic 2010 00:01:27

Adelante, compañero, no me preocupa mucho, me alegra que hayas encontrado una solución... ;)

t31os

19 dic 2010 00:04:49

goldenapples 9.26K · Accepted Answer · 2010-12-19T00:15:56Z

¡Gracias a todos!

El filtro image_send_to_editor era el que estaba buscando... gracias @t31os por señalarlo.

Aquí están mis funciones ahora.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Esto elimina los atributos de dimensiones en línea de las imágenes recuperadas con the_post_thumbnail(), y evita que esos atributos se agreguen a nuevas imágenes añadidas al editor. No los elimina de las imágenes recuperadas mediante wp_get_attachment_image u otras funciones relacionadas (no hay hooks allí), pero esos casos pueden procesarse en los archivos de plantilla cuando sea necesario.

goldenapples

9.26K

19 dic 2010 00:15:56