WordPress : Función the_post_thumbnail muestra imagen destacada

→ Ir a la Página oficial de Función the_post_thumbnail 

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() );
}

Post thumbnail sizes

//Default WordPress
the_post_thumbnail( 'thumbnail' );     // Thumbnail (150 x 150 hard cropped)
the_post_thumbnail( 'medium' );        // Medium resolution (300 x 300 max height 300px)
the_post_thumbnail( 'medium_large' );  // Medium Large (added in WP 4.4) resolution (768 x 0 infinite height)
the_post_thumbnail( 'large' );         // Large resolution (1024 x 1024 max height 1024px)
the_post_thumbnail( 'full' );          // Full resolution (original size uploaded)

//With WooCommerce
the_post_thumbnail( 'shop_thumbnail' ); // Shop thumbnail (180 x 180 hard cropped)
the_post_thumbnail( 'shop_catalog' );   // Shop catalog (300 x 300 hard cropped)
the_post_thumbnail( 'shop_single' );    // Shop single (600 x 600 hard cropped)