» » Cómo preparar WordPress para imágenes en un diseño fluido

Cómo preparar WordPress para imágenes en un diseño fluido

Publicado en: Tecnología | 0

WordPress añade por defecto y de forma automática la información del alto y ancho de la imagen que subimos desde su gestor multimedia. Para un diseño fluido o responsive no nos interesa ese dato, pues haría que salieran en pantalla a un tamaño fijo, todo lo contrario a lo que se persigue con estos diseños, en los que queremos que se adapte al tamaño de pantalla de nuestro dispositivo.

Para eso, debemos quitar en la etiqueta img el alto y ancho desde los filtros de nuestro theme, y ajustar las CSS para que muestren las imágenes a un máximo del 100%, independiente del tamaño original de la imagen.

Ajustar las CSS:

img{max-width: 100%;}

En el fichero functions.php de nuestro theme añadimos una función que quite los tags width y height de la función del core de WordPress:

// Remove thumbnail width and height dimensions that prevent fluid images in the_thumbnail
function remove_thumbnail_dimensions( $html )
{
  $html = preg_replace('/(width|height)=\"\d*\"\s/', "", $html);
  return $html;
}

Y en el mismo fichero de functions.php añadir los filtros:

Este quita los atributos width y height de los thumbnails:

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

Y este otro los quita de las imágenes de los mensajes:

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

Que lo disfrutéis

 

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.