¿Filtrar para eliminar los atributos de dimensión de imagen?


35

Estoy trabajando en un sitio basado en una plantilla CSS de ancho fluido que establece un ancho máximo en las imágenes al ancho de la columna que las contiene, y necesito eliminar los atributos de dimensión de ancho y alto en línea 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 ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

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


En primer lugar, gracias por el código muy útil. Funciona perfectamente para eliminar los atributos de ancho y alto de la etiqueta img, pero por alguna razón también parece eliminar el código abreviado del subtítulo si lo hay. ¿Alguien sabe por qué es esto y cómo corregirlo?
Dominic P

1
¿Tal vez deberías publicar esto como su propia pregunta? Parece lo suficientemente diferente de la mía que merece su propia respuesta. Sin embargo, trataré de responder ... para cualquier otra persona que encuentre esta respuesta y tenga el mismo problema: su problema es que la función img_caption_shortcode, que procesa el código abreviado del subtítulo, requiere que se especifique un ancho en los atributos del código abreviado del subtítulo. De lo contrario, omite el subtítulo por completo y solo devuelve el contenido envuelto dentro de las [caption]etiquetas de código corto.
goldenapples 03 de

Si desea poder utilizar códigos cortos de subtítulos sin un ancho definido, tendrá que definir el marcado de subtítulos en una función que esté enganchada en el filtro img_caption_shortcode. Sin embargo, escribir el código para una función como esa es más de lo que puedo incluir en los comentarios.
goldenapples 03 de

@goldenapples, gracias por su útil respuesta. Hice lo que sugirió y formulé una nueva pregunta aquí: wordpress.stackexchange.com/questions/32931/… . Cualquier aportación sobre eso sería muy apreciada. Como explico en la pregunta, no estoy seguro de que el filtro img_caption_shortcodeactivado sea suficiente para resolver el problema.
Dominic P

1
Tal vez me estoy perdiendo la imagen más grande de lo que estás tratando de hacer sin ver tu contenido real, pero ¿no se puede remediar esto usando CSS solo? Si está utilizando un ancho máximo en sus imágenes, debería poder vencer el problema de la altura agregando una altura: auto; a tus imágenes de contenido.
binaryorganic

Respuestas:


36

¡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 dimensión en línea de las imágenes recuperadas the_post_thumbnail()y evita que esos atributos se agreguen a las nuevas imágenes agregadas al editor. No los elimina de las imágenes recuperadas a través de wp_get_attachment_imageotras funciones relacionadas (no hay ganchos allí), pero esos casos se pueden procesar en los archivos de plantillas cuando sea necesario.


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

1
@MattSlay ¿Soy yo el único que tiene problemas para modificar permanentemente el contenido del sitio? Un tema receptivo no debería tener que modificar el contenido del sitio web para que se formatee correctamente. Voto para eliminar el filtro image_send_to_editory, en su lugar, agregarlo the_content, como esta publicación de blog . Esto separa la lógica de presentación del contenido.
BFTrick 01 de

1
@BFTrick: me parece una cuestión de contexto. Para un tema receptivo, estoy de acuerdo con usted porque no puede depender de que el contenido existente se haya procesado de esta manera, y no sabe si el próximo tema instalado necesitará esos atributos de dimensión. En mi caso, estaba creando una aplicación donde el tema era integral para el contenido, por lo que elegí el método menos intensivo de procesador para procesar las imágenes cuando se agregaron por primera vez. Pero haces un buen punto.
goldenapples 01 de

2
Advertencia: esta respuesta rompe los subtítulos de las imágenes en WordPress 3.5.1.
conectado el

5

Modificó este script un poco. ¡Gracias por la ayuda!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

55
Cuidado, sin embargo. Al filtrar the_content también se filtrarán los videos de youtube y cualquier otro atributo ancho / alto.
MikeNGarrett

1
Es cierto, pero eso puede ser algo bueno en un sitio receptivo. Si uno necesita hacerlo para imágenes, probablemente también deba hacerlo para otros medios.
BFTrick el

1

si configura el tamaño de la imagen en function.php como una "galería"

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

puede eliminar el ancho y la altura de un tamaño de imagen específico como "galería":

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;
}

0

La aplicación de ese filtro lo the_contentactivará para todo el contenido. Esto será efectivo, pero podría afectar el rendimiento y el tiempo de carga de su sitio. Sería mejor si le dice a WordPress que simplemente no inserte las etiquetas de ancho y alto en línea cuando inserta 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 de TinyMCE. Puede haber una manera de conectarlo directamente, pero no utilizando las add_filter()llamadas estándar .


1
¿No funcionaría un filtro en el image_send_to_editortrabajo aquí?
t31os

@ t31os - ¡Creo que eso es lo que estaba buscando! No sé por qué no vi ese gancho antes.
goldenapples

Bueno, ciertamente espero que ayude, parece que podría ser el truco ... informe y háganos saber. :)
t31os

@ t31os Sí, eso hizo el truco! ¡Gracias! Lo publicaré como respuesta, a menos que llegue primero.
goldenapples

2
Ve por ello amigo, no estoy demasiado preocupado, feliz de haber podido encontrar una solución ...;)
t31os
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.