Todo lo que hay que saber sobre las imágenes destacadas o post thumbnails en WordPress

Los post thumbnails o imágenes destacadas es una característica que se introdujo en la versión 2.9 de WordPress. Permite asignar una imagen representativa a las entradas, páginas o custom post types. Ésta imagen es ideal para mostrarla en listados, destacados, o asignarla a la meta etiqueta open graph (og:image) para compartir contenido en redes sociales.

Activar la característica post-thumbnails en tu tema.

Si tu tema no está preparado o estas desarrollando uno a medida, lo primero que tienes que hacer es activar las imágenes destacadas. Para ello, bastará con usar la función add_theme_support() y pasarle el parámetro “post-thumbnails”. Añade en tu functions.php estas líneas:

<?php

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Una vez hecho esto, nos aparecerá en el lateral de edición de páginas y entradas un meta box para añadir la imagen destacada.

<?php

function my_custom_post_type() {
  $args = array(
    …
    'supports' => array( 'title', 'editor', 'thumbnail' ),
    …
  );
  register_post_type( 'my_custom_post_type', $args );
}
add_action( 'init', ' my_custom_post_type ' );

¿Puedo personalizar el tamaño de la imagen destacada?

Sí. Por defecto WordPress sube la imagen a tamaño original y genera además 3 miniaturas:

• Thumbnail, de 150px x 150px (máximo)
• Medium, de 300px x 300px (máximo)
• Large, de 1024px x 1024px (máximo)
• Full, imagen a tamaño original (tal y como se sube)

Puedes generar tu miniatura personalizada con la función add_image_size():

<?php

add_image_size( $name, $width, $height, $crop);

Sobre éste punto hablé con más detalle en la entrada anterior Cómo crear imágenes destacadas con tamaños personalizados en WordPress.

¿Puedo cambiar el título del meta box de la imagen destacada?

Sí. Podemos cambiar el título de la caja o meta box de imagen para por ejemplo informar especificando un formato o dimensiones concretas.

Sobre éste punto hablé con más detalle en la entrada anterior Cómo cambiar el título del meta box de la imagen destacada en WordPress.

Cómo administrar las imágenes destacadas

Puedes subir o escoger una imagen destacada utilizando la librería multimedia simplemente haciendo click en “Asignar imagen destacada”.

Una vez subida o seleccionada de la librería multimedia, podemos asignarle una serie de atributos que nos pueden ser de utilidad en nuestro front-end:

• URL: Es la url absoluta de tu imagen destacada. Las imágenes se guardan por defecto en la carpeta /wp-content/uploads.
• Leyenda: Se suele utilizar para explicar el contenido de la imagen añadiendo éste texto a continuación o para hacer declaraciones de copyright.
• Texto alternativo: En este atributo podemos establecer el texto alternativo de nuestra imagen, punto importante de cara al SEO de nuestra web.
• Descripción: Texto descriptivo que podemos utilizar según nuestras necesidades en el front-end.

Cómo trabajar con las imágenes destacadas en nuestra web

Una vez administradas y configuradas todas las opciones en nuestro back-end, es hora de ver qué podemos hacer con las imágenes destacadas en nuestra web y que funciones son útiles para nuestros propósitos.

Lo primero que debemos hacer es preguntar si nuestra entrada, página o custom post type dispone de una imagen destacada. Para ello usaremos la función has_post_thumbnail(). La podemos utilizar dentro de nuestro loop o pasarle como parámetro el $post_id. Devolverá true en caso de que nuestro post tenga asignada una imagen destacada.

Una vez que sabemos que disponemos de imagen destacada, la primera función de la que vamos a hablar es: the_post_thumbnail(). Ésta función debe ser usada dentro del loop, y pinta la etiqueta img completa

<?php

if ( has_post_thumbnail() ) {
  the_post_thumbnail( $size, $attr );
}

Acepta dos parámetros:

• Size: Tamaño a mostrar, podemos escoger entre “thumbnail”, “medium”, “large”, “full” o si hemos declarado un tamaño personalizado, su identificador
• Attr: Array donde podemos establecer los valores de “src”, “class” (para asignar una clase CSS, “alt” (para definir el texto alternativo) y “title” (para definir el título)

Todo esto está muy bien, ¿pero qué pasa si queremos tener acceso a todos los datos de la imagen como el título, la leyenda, el texto alternativo, la descripción, etc…? Aunque parezca increíble, no disponemos de ninguna función para ello, por lo tanto vamos a crear una en nuestro functions.php que nos devuelva en un array() todos estos datos

<?php

function wp_get_attachment( $attachment_id ) {
  $attachment = get_post( $attachment_id );

  return array(
    'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
    'caption' => $attachment->post_excerpt,
    'description' => $attachment->post_content,
    'href' => get_permalink( $attachment->ID ),
    'src' => $attachment->guid,
    'title' => $attachment->post_title
  );
}

WordPress almacena las imágenes en la tabla wp_post, y usa el campo post_title para el título, post_excerpt para la leyenda, post_content para la descripción, y el texto alternativo lo almacena en un post_meta llamado _wp_attachment_image_alt. La información sobre las miniaturas generadas se almacena también en post_metas, concretamente en _wp_attachment_metadata.

Todo esto sigue estando muy bien, ¿pero qué pasa si quiero obtener una imagen con un tamaño personalizado o miniatura además de los datos asociados a la imagen? Usaremos la función de WordPress wp_get_attachment_image_src(), a la que podemos pasar como parámetros el ID de nuestro attachment, ojo, no el ID del post (para conseguir esto utilizaremos (dentro del loop) la función get_post_thumbnail_id()), y el tamaño de miniatura o personalizado. wp_get_attachment_image_src() devuelve un array con la url, el ancho, el alto y un booleano que es true si la imagen es una imagen redimensionada, y false en caso de ser la imagen a tamaño original.

A continuación llamaremos a nuestra función para que nos devuelva toda la meta información. El ejemplo completo quedaría de la siguiente forma:

<?php

if ( has_post_thumbnail() ) {
  $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
  $featured_image_url = $featured_image[0];
  $featured_image_width = $featured_image[1];
  $featured_image_height = $featured_image[2];

  $featured_image_metadata = wp_get_attachment( get_post_thumbnail_id() );
}

• « Cómo cambiar el título del…
• Cómo realizar un formulario de… »