Eliminar los atributos de ancho y alto del cargador de archivos WordPress

Pensarás que es una chorrada pero no, no es ninguna tontería, y te lo voy a explicar … si es que quieres estar al día claro. Si eres de los antiguos y no quieres progresar pasa de esta entrada.

Como ya sabrás, al insertar una imagen desde el cargador de archivos en el editor de WordPress se añaden automáticamente los atributos HTML width y height que indican el tamaño en el que se mostrará la imagen en tu tema activo, para eso, para que se adapte al ancho del tema y no quede horrible, pero esto ya lo sabías ¿no?.

Pues bien, esto ya es cosa antigua …

Con los nuevos diseños adaptables (o como se les denomina en inglés «responsive«), que se adaptan al navegador e incluso dispositivo desde el que se está visualizando una web, no tiene sentido definir atributos fijos de ancho y alto de imágenes, pues el tema se adaptará, como todos los elementos del contenido, al tamaño del dispositivo lector, sea este un ordenador, un smartphone o un iPad, mola ¿eh?.

¿Entiendes ya porque es posible que sea interesante eliminar – por defecto – los atributos width y height que el cargador de archivos inserta en el editor?. Pues eso, que si usas un tema con diseño adaptable no necesitas algo como esto:

<img src="ruta/a/tu/imagen" width="500" height="600" class="aligncenter size-full" alt="" title="">

Para eliminar por defecto los atributos que te sobrarán en un diseño adaptable sólo tienes que añadir el siguiente código al archivo functions.php de tu tema:

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 y ya está. La próxima vez que insertes una imagen en tu editor ya no añadirá los atributos width y height, que de eso ya se ocupará tu tema adaptable (o «responsive«, como prefieras llamarlo)

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 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.

11 comentarios en “Eliminar los atributos de ancho y alto del cargador de archivos WordPress”

  1. Bueno,  tengo que contradecirte Fernando en cuanto a la necesidad de tener el atributo colocado mas alla de la estetica es cuestion de validacion de codigo, si no tienes los atributos tu codigo no es validado y tambien dificulta la exploracion de los bot de buscadores.

    Fijate que se recomienda siempre colocarlos aunque no sea necesario ya que puede que exista el caso (como muchos hacemos) que solo subimos imagenes mas pequeña del cuadro que tenemos disponible para ahorrar ancho de banda y espacio de alojamiento y parece no ser necesario ya que no se debe ajustar nada, hasta alli es necesario.

    Los atributos de ancho y alto agregan informacion importante y no me parece buena idea eliminarlos.

    1. Xavier Ocampos

      Se que es antiguo, pero me llamo la atención este truco que no conocía.

      Si tu página no es un portafolio de imágenes donde tengas que dar prioridad a tus imágenes por encima del contenido puede que tenga sentido preocuparse en el SEO para imágenes, pero si tienes una simple página donde las imágenes no pasan a ser meros adornos sin importancia es preferible que esos adornos adornen en cualquier dispositivo a que Google posicione mejor una imagen que ni siquiera tiene tanta importancia dentro de tu entrada/página.

      Ademas es cierto, Google a implementado un sistema de posicionamiento para imágenes inadecuado y tampoco es plan de ofrecer una mala experiencia al usuario a favor de Google…

  2. Estoy  de acuerdo con YoGeekOnline, para el tema SEO es importante definir el ancho y el alto, asi como el alt en el tag , pero claro, también tiene razón Fernando para el tema Responsive Design.

    Entonces después de todo esto, se abre como un debate, que es mas importante?

  3. Estoy con YoGeekOnline. Si al menos esa informacion en functions.php definiera con exactitud la size para cada dispositivo bien pero eliminarlo tal cual te dara warnings de validacion y por el tema de velocidad de carga google matara 3 gatitos por imagen …

  4. Sin ánimo de crear polémica (bueno si jeje) … 

    ¿Estamos por la usabilidad, por ofrecer una buena experiencia web al usuario o solo para darle gusto a Google?

    1. El 70% viene de buscadores, no solo google Fernando, asi que si no hay SEO no existen los usuarios. Con todo respeto voto por la opcion que colocaste en otro post de ajustar el ancho a mostrar por CSS. Esa es mas correcta.

  5. la vez pasada leí en este blog un metodo (me parece que era sin plugins) de como evitar que worpress redimensione las imagenes ya que cuando subes una imagen a WordPress este almacena varias versiones de la misma y he utilazado el buscador de aqui y no sale…

    alguien sabe como hacer eso?

  6. entonces en estos casos, creo que lo mejor es agregar una sentencia especial para las versiones mobile, por ejemplo:
    img {
    border: 0;
    max-width:90%;
    height:auto;
    }
    sin importar el ancho o alto de la imagen, que ésta no exceda el 90% de la pantalla del dispositivo en cuestión.
    A mi me ha resultado bastante bien, en sitios adaptables, Saludos.

  7. La función va muy bien, pero al menos a mi me pasó que cuando inserto un link a la imagen, vuelve a colocar los atributos de ancho y alto. Si alguien tiene una solución a esto, le agraderia mucho.

  8. Oscar Contreras

    Gracias una y otra vez. Tengo mi plantilla tipo responsive y las malditas imágenes seguían sin adaptarse.

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