Uno de los mayores retos a los que se enfrentan los desarrolladores web hoy en día es el de gestionar adecuadamente las imágenes para un diseño responsivo. Nos enfrentamos a problemas como elegir el tamaño adecuado para la pantalla en la que se visualizarán, tener en cuenta la velocidad de descarga del usuario, si el dispositivo del usuario es retina (o en general un monitor de super alta resolución), y mucho más.
Afortunadamente, el elemento <picture> ha pasado a ser una especificación que implementada por la mayoría de los navegadores, aunque todavía queda algo de trabajo por hacer. Por suerte, la forma en que WordPress gestiona las imágenes facilita las cosas.
Cómo funciona el cargador de medios
Primero, realicemos un curso rápido sobre el uso del Cargador de Medios. Se accede a él desde distintas áreas del administrador de WordPress, incluyendo las entradas, las páginas y los tipos de entradas personalizadas que lo admitan, en general, desde el editor y desde el menú Medios.
La única diferencia entre acceder desde el menú Medios y el resto de opciones, es que si se hace desde el editor de una entrada o página, la imagen será asociada (adjuntada) a dicha entrada o página.
Una vez una imagen ha sido cargada, WordPress creará automáticamente hasta 4 tamaños de la misma.
- miniatura (150×150)
- medio (300 máx x 300 máx)
- grande (640 máx x 640 máx)
- completo (el tamaño original de la imagen)
Pero además puedes añadir tus propios tamaños de imagen personalizados usando la función add_image_size(). Por ejemplo, si quisiéramos añadir una imagen para un producto que tiene 700px de ancho por 450px de alto, podríamos hacer lo siguiente:
|
1 |
add_image_size( 'product-img', 700, 450, false ); |
Esto le indica a WordPress que cree una nueva copia de la imagen con el nombre ‘product-img’ y con las dimensiones en píxeles que hemos especificado. El último argumento indica si la imagen se debe recortar o no.
Cuando lo estableces en false, la imagen será redimensionada proporcionalmente sin recortar; si se indica true, la imagen será recortada por los lados o los bordes superior e inferior. Ten cuidado con este ajuste, ya que los resultados podrían variar de una imagen a otra.
Insertar una imagen
Existen dos maneras de insertar una imagen en una entrada o página: la primera forma es a través del Cargador de Medios, tal y como se muestra aquí:
La segunda forma se realiza usando una imagen destacada. Habitualmente todos los temas admiten el uso de imágenes destacadas en las páginas y entradas. Pero si no es así, puedes habilitarlas añadiendo este código al archivo functions.php de tu tema, o en otro lugar de tus plugins:
|
1 2 3 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); } |
Esto añadirá un cajetín ‘imagen destacada’ a todas tus entradas, páginas, y tipos de entradas personalizadas que lo admitan. También puedes enviar un segundo argumento, que consiste en una cadena que indica qué debería disponer de una imagen destacada.
Por ejemplo, si solo quieres que sean las entradas (post) las que admitan imágenes destacadas usarías lo siguiente:
|
1 2 3 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails', array( 'post' ); } |
El último paso es colocar este código dentro del Loop de tu plantilla, siempre que desees que la imagen se muestre en el front-end:
|
1 2 3 |
if ( has_post_thumbnail() ) { the_post_thumbnail( 'large' ); } |
El argumento aceptado es el nombre del tamaño de la imagen que quieras usar. Por defecto, es post-thumbnail, es decir el tamaño miniatura. Los otros parámetros para el tamaño de la miniatura son:
|
1 2 3 4 5 6 7 |
the_post_thumbnail('thumbnail'); // Miniatuta (predeterminado 150px x 150px maximo) the_post_thumbnail('medium'); // Resolución media (predeterminado 300px x 300px maximo) the_post_thumbnail('medium_large'); // Resolución media-grande (predeterminado 768px x 0px maximo) the_post_thumbnail('large'); // Resolución grande (predeterminado 1024px x 1024px maximo) the_post_thumbnail('full'); // Resolución original de la imagen (sin modificar) the_post_thumbnail( array(100,100) ); // Otras resoluciones, especificando altura y anchura en píxeles |
Una vez tengas esto, añadirás tu imagen destacada pulsando el enlace «Establecer imagen destacada» en este cajetín lo que te dirigirá a la Biblioteca de medios:
Por último, si cargas un grupo de imágenes a la misma entrada o página, puedes insertarlas como galería usando el shortcode gallery sobre el cual puedes leer más aquí.
Mejoras en 3.9
Junto con el lanzamiento de WordPress 3.9, se han incorporado algunas mejoras realmente interesantes para las imágenes y las galerías. Junto a las mejoras en el editor visual, como la habilidad de arrastrar y soltar las imágenes, add_image_size() ha obtenido un nuevo argumento para especificar si recortar la imagen por los lados o por los márgenes superior e inferior.
Lo que te queda por leer:
- Aprovechar el cargador de medios
- picturefill.js
- Ponerlo todo junto
- Reemplazar imágenes destacadas
Deja una respuesta