Quitar atributos de ancho y alto a las imágenes

wordpress responsive

Si hace poco que te has cambiado a un tema adaptable (responsive) seguramente ya te habrás percatado que las imágenes no se muestran como debieran en según qué dispositivos.

Esto normalmente es debido a que al no usar antes un tema adaptable aplicabas atributos fijos de ancho y alto a las imágenes, para que se adaptaran a las cajas de contenido de tu tema previo, y ahora, a pesar del diseño adaptable del nuevo tema, las imágenes no se adaptan como debieran.

O sea, que tus imágenes están insertadas de este modo:

<img src="ruta/a/tu/imagen" width="550" height="815" class="align center size-full" alt="" title="">

Afortunadamente no hay que andar modificando cada imagen insertada, ni siquiera necesitas instalar plugin alguno, solo tienes que añadir el siguiente código a tu plugin personal o al archivo functions.php del tema activo:

//Quitar atributos de ancho y alto para temas "responsive"
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

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

Guardas los cambios y ya está, todo limpito. Para las nuevas imágenes nada mejor que este otro truco para quitar los atributos de ancho y alto del cargador de imágenes.

Visto en CSS tricks

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

2 comentarios en “Quitar atributos de ancho y alto a las imágenes”

  1. Xavier Ocampos

    Luis, de hecho es mejor hacerlo. Si a las imágenes no se les aplica un ancho y alto por defecto se toman las medidas que tenga la imagen, de forma que no es necesario complicarse para formatear el ancho/alto por CSS, tan solo declarar que el ancho máximo de la imagen debe ser el 100% y dejar el alto en «auto» para que en caso de que tu diseño sea responsive y su panel contenedor se reduzca la imagen se reduzca con el mismo.

    Claro, también encontraras quien te diga que lo ideal es declarar un ancho/alto fijo a las imágenes por motivos de posicionamiento, y aunque es cierto que Google da preferencia a las imágenes que tienen sus medidas declaradas por HTML esto es más bien un error por parte de Google ya que estando en la época de los diseños Responsive no tiene ningún sentido que se sigan llevando a cabo estas medidas.

    Pero bueno, también se agradece el truco que nos propones, viene siendo lo mismo pero complicándose un poco más en el formateo.

    Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido