≡ Menú

Genesis Framework y las imágenes destacadas

Las imágenes destacadas, cuyo nombre es featured images fueron agregadas a la versión 2.9 de WordPress, junto con otra característica complementaria, las imágenes miniatura o post thumbnail1. Estas miniaturas son muy usadas en los temas tipo magazine o de películas para mostrar los carteles, por ejemplo.

Esta característica de post thumbnail proporciona una forma estandarizada de mostrar una imagen de una forma bastante económica; antes se requería que se agregara la imagen en un campo personalizado, lo que hacía muy tediosa esta actividad; o peor aún se usaban script que sobrecargaban el servidor o eran presa fácil de los crackers.

Afortunadamente Genesis Framework proporciona una forma fácil de utilizar esta importante característica.

Código para utilizar imágenes destacadas

Primero, debemos asegurarnos que en nuestro archivo

functions.php

  exista soporte para esta función. Esto hará que se agregué el cuadro de dialogo a la interface del Escritorio.

add_theme_support( 'post-thumbnails' );

Esta función habilita la interface para imágenes destacadas, tanto en las entradas tipo Postcomo en las tipo Page. Si solo necesitas las imágenes destacadas en un solo tipo de entrada, entonces tendrías que usar algo como esto:

add_theme_support( 'post-thumnails', array( 'post' );
add_theme_support( 'post-thumnails', array( 'page' );

Simplemente elimina la línea que no desees.

Lo siguiente que debemos hacer es especificar las dimensiones de las imágenes miniatura. Aquí tenemos dos opciones: redimencionarla o box-resizing y recortarla o hard-cropping.

La redimención o box-resizing significa que se cambia o reduce el tamaño de la imagen sin perder proporción, es decir, sin distorcionarla hasta que “quepa” dentro de la caja que especificaste en los parámetros. Imagina que es una caja de pizza y tienes que reducir el tamaño de la imagen hasta que quepa en la caja, si cabe en lo ancho, pero no en lo lago, debes seguir reduciendo. Po ejemplo, si tienes una imagen de 100×50 y una caja de 50×50, la imagen se reducirá a la mitad en ambas dimensiones, es decir quedará en 50×25. La imagen es más pequeña pero cabe en la caja. Si quieres que la imagen solo se ajuste del ancho, por ejemplo, en el parámetro de altura colocamos un valor tipo 9999 o algo así de imposible de alcanzar.

set_post_thumbnail_size( 50, 50 );

La segunda opción es el recorte o hard-cropping. En esta modalidad, la imagen se recorta hasta alcanzar las dimensiones especificadas exactamente. La ventaja es que obtienes exactamente lo que pediste. Si pides una miniatura de 50×50 obtienes una miniatura de 50×50. La desventaja es que tu imagen será recortada (ya sea de ambos lados o de arriba y abajo) para alcanzar el tamaño especificado, y perderás una parte de tu imagen.

set_post_thumbnail_size( 50, 50, true );

Ahora que hemos habilitado las imágenes en miniatura, ya podemos usar la en nuestra plantilla.

Cómo usar miniaturas en una plantilla

Existen varias funciones relacionadas con las miniaturas o thumbnails y las veremos a continuación.

  • has_post_thumbnail();

      regresa cierto o falso para indicar si la entrada actual tiene una imagen destacada.

    <?php
      if ( has_post_thumbnail() ) {
        // el código que deseamos
      } else {
        // otra cosa
      }
    ?>
  • the_post_thumbnail(); 

     devuelve la imagen destacada, si existe:

    <?php the_post_thumbnail(); ?>

Estas son las funciones básicas. En el siguiente artículo de la serie, veremos algunas de las funciones avanzadas.


  1. En esto de WordPress hay que usar los nombres en inglés porque así se llaman también las funciones que usan. 

Sobre el autor: Auditor Líder ISO 9000 | Desarrollo Web Full Stack | JavaScript · Angular · VueJS · EmberJS | WordPress Advocator | Programador Django/Python | Lector | Generación X | Soy de Tlaxcala