libreria multimedia

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:

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.

Nota

Si deseas que aparezca también en los custom post type, no olvides declararlo en el parámetro support que se pasa como argumento en el registro del 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():

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”.

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:

atributos-imagen-destacada

  • 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

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

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:


¿Me invitas a un café?
Si te ha gustado el blog o algún artículo en concreto te ha ayudado a resolver una duda o problema que tenías…¿me invitas a un café?

Puede que también te interese

Child themes en WordPress: Guía rápida
Un child theme o tema hijo en WordPress es un tema que modifica o extiende la funcionalidad de otro tema, llamado “tema padre”. En esta…
Creando un tema desde cero para WordPress parte 4: Acciones al activar/desactivar
1. Creando un tema desde cero para WordPress: Consideraciones previas 2. Creando un tema desde cero para WordPress: Escribiendo el tema 3. Creando un tema…
Cómo añadir un enlace para los ajustes en el listado de plugins
Si estas desarrollando un plugin o vas a desarrollarlo, puede resultarte de utilidad saber cómo añadir un enlace para los ajustes de tu plugin en el…
Cómo crear imágenes destacadas con tamaños personalizados en WordPress
Con ésta cuestión nos podemos encontrar muy a menudo sobre todo si estamos desarrollando temas a medida. En nuestro diseño vendrán definidas unas imágenes con…




  • Henry

    Tengo un problema grande con esto, le pongo una imagen destacada y le doy actualizar y no me reconoce ningun cambio, uso genesis hermano…. gracias por tu ayuda, estoy grave

    • Hola Henry

      Génesis es un framework de pago. Si usas Génesis pregunta directamente a su soporte oficial

      Saludos