Dos de las cosas que más me gustan de trabajar con Genesis es su flexibilidad y (una vez que conoces bien el framework) la facilidad con que se puede hacer absolutamente cualquier cosa con apenas una o dos líneas de código. Y quizá eso es lo que más asusta al usuario medio: la necesidad de usar código (si es tu caso, en la parte final te explico cómo hacerlo con un plugin gratuito y muy bueno).

Por ejemplo con el tema de las imágenes destacadas: la mayoría de plantillas te ofrecen opciones sobre si mostrarlas o no en las páginas de archivo, en las entradas o en las páginas, pero al final te tienes que adaptar al formato de imagen que el theme establece.

Con los child themes de Genesis ocurre justo lo contrario: quizá es un poco (muy poco) más complicado hacerlo, pero a cambio tienes flexibilidad absoluta a la hora de establecer tamaño, formato y comportamiento de las imágenes destacadas.

Establecer un tamaño de imagen destacada personalizado

Antes de empezar a poner o a quitar imágenes destacadas, vamos a establecer el tamaño de imagen que nosotros queramos. Lo dicho en este apartado vale no sólo para Genesis, sino para cualquier theme de WordPress.

Ya sabes que WordPress registra, por defecto, unos tamaños de imágenes concretos:

• thumbnail, de 150×150
• medium, de 300×300
• large, de 1024×1024
• full, el tamaño original que se ha subido

Estos tamaños no son inmutables: se puede hacer uso de set_post_thumbnail_size para establecer nuevas dimensiones para ellos. De hecho, puedes hacerlo tú mismo simplemente yendo a Ajustes > Medios, donde puedes ver los tres tamaños con sus valores actuales, y cambiarlos. También puedes cambiar los que establece WooCommerce para sus imágenes en WooCommerce > Ajustes > Productos > Mostrar > Imágenes del producto.

Además de esto, cada theme (incluyendo los child themes de Genesis) registra sus propios tamaños de imagen, al igual que también muchos plugins, como el ejemplo que hemos visto con WooCommerce.

Sin embargo uno no tiene por qué conformarse con lo que le ofrecen y puede establecer sus propios tamaños personalizados. La ventaja es que con Genesis se hace mucho más fácil poder después usarlos. Para registrar nuevos tamaños de imagen sólo hay que hacer:

add_image_size ('nombre-miniatura', 800, 400, TRUE);

Y ya está, así de fácil. Una vez hecho esto tendrás disponible para utilizar un nuevo tamaño de imagen llamado nombre-miniatura (puedes usar el nombre que te plazca, excepto los cuatro nombres reservados que he mencionado más arriba y cualquier otro que ya esté registrado) y con el ancho y alto especificados (en ese orden).

El último argumento (el TRUE) especifica si la imagen debe o no recortarse. Por defecto, si no se especifica, se establece como FALSE, y la imagen no se recortará sino que se redimensionará al ancho especificado y la altura será proporcional.

Cómo acceder al tamaño de imagen personalizado

Decía que ya tienes disponible ese nuevo tamaño de imagen, y durante el artículo veremos dónde usarlo. En cuanto a la forma de llamarlo, es bastante sencillo, basta con un:

get_the_post_thumbnail_url ($id, 'nombre-miniatura');

lo que devuelve la URL a la miniatura de imagen que has creado para el post, página, producto o custom post type especificado en el ID. Este primer parámetro puedes establecerlo a null si estás dentro del bucle para que utilice el del post actual.

Ese modo te da una libertad total, ya que tú mismo puedes construir el código HTML, con los atributos que quieras (como rel=»lightbox», clases personalizadas, alt y title a medida, etcétera). Pero lo cierto es que si estás dentro del bucle hay una forma mucho más rápida, que te da ya la imagen insertada:

the_post_thumbnail ('nombre-miniatura');

La imagen destacada en las páginas de archivo en Genesis

Aunque puedes hacerlo por código, aún no es necesario: Genesis tiene una opción para mostrar las imágenes destacadas en las páginas de archivo (blog, categorías, etiquetas…).

Para ello basta con ir a Genesis > Ajustes del tema y, en el apartado Archivos de contenido activar la casilla ¿Incluir la Imagen destacada?

Después sólo te queda seleccionar cuál de los tamaños registrados en la instalación quieres utilizar (incluyendo los que tú mismo has registrado como he explicado en el apartado anterior) y la alineación. Listo y a otra cosa.

Mostrar la imagen destacada en entradas individuales con Genesis

No hay una opción sin embargo para que se muestre en las entradas individuales, así que eso lo tenemos que hacer nosotros mismos mediante código. La buena noticia es que eso nos da la libertad para hacerlo dónde y cómo queramos.

Y además es mucho más sencillo de lo que piensas. Lo habitual para esto es usar el hook de Genesis genesis_before_entry, que se ejecuta antes de la entrada individual (digo entrada pero sirve para cualquier tipo de contenido, como productos o cualquier otro custom post type).

Así que, aplicando el método fácil, sencillo, rápido e indoloro basta con algo así:

add_action ('genesis_before_entry', function () {

     if (!is_singular ('post'))
          return;

     the_post_thumbnail ('nombre-miniatura');
});

Eso si sólo lo quieres aplicar a las entradas. Si quieres aplicarlo a otro tipo de contenido, sólo tienes que sustituir ‘post’ por el nombre del custom post type que sea. Y si quieres que se muestre en varios de ellos puedes hacerlo sustituyendo el condicional por algo así:

if (!is_singular (array ('post', 'portfolio', 'testimonial')))

Claro que, como decía al principio, puedes utilizar get_the_post_thumbnail_url en lugar de the_post_thumbnail si quieres algo más personalizado. Por ejemplo:

add_action ('genesis_before_entry', function () {
  
  if (!is_singular (array ('post', 'portfolio')))
	return;
  
  $completa = get_the_post_thumbnail_url (null, 'full');
  $miniatura = get_the_post_thumbnail_url (null, 'nombre-miniatura');
  echo '
';
  return;
});

Con lo que, de una tacada, estás:

• Metiendo la imagen mostrada en un div con clase personalizada, para aplicarle los estilos que quieras.
• Enlazándola a la imagen completa con un rel=»lightbox», para que al hacer click se muestre la imagen a tamaño completo (para que eso funcione tendrías que enlazar lightbox, tanto los estilos como el script).
• Poniéndole el alt y el title que te dé la gana. En este ejemplo son el propio título de la entrada, pero podría ser por ejemplo un campo personalizado.

Como ves, libertad y flexibilidad no faltan.

Establecer en Genesis las imágenes destacadas mediante un plugin

Si todo lo de arriba te ha sonado a chino o si ni siquiera has hecho el ánimo de leerlo (muy comprensible por otro lado) estás de enhorabuena: hay un plugin que te va a facilitar la vida con esto. Se trata de Display Featured Image for Genesis.

El nombre lo dice todo: te permite seleccionar si quieres mostrar la imagen destacada en entradas individuales (y, si la imagen tiene el suficiente tamaño, lo hace de forma espectacular), y tiene también algunas otras opciones (en Apariencia > Display Featured Image for Genesis) bastante interesantes:

• Mostrar una imagen por defecto para las entradas que no tienen establecida una imagen destacada
• Mostrar o no la imagen destacada en la home
• Añadir la imagen destacada en el feed

Y algunas otras que te permitirán afinar la visualización. Si quieres verlo en acción, aquí tienes un vídeo: