Mostrar la imagen destacada bajo el título de los CPT de Genesis Framework

Descubre en este tutorial cómo enseñar la imagen destacada debajo del título en las entradas de Custom Post Types en child themes de Genesis Framework mediante código.

Por defecto, algunos temas de Genesis, como Genesis Sample, no muestran la imagen destacada dentro de las entradas de los Custom Post Type.

¿Quieres añadir la imagen destacada debajo del título?

Puedes hacerlo de forma sencilla gracias a los hooks de Genesis Framework.

Este sería el resultado final:

Snippet para insertar la imagen destacada en entradas de un CPT

Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:

Con este bloque haces que la imagen destacada se visualice justo después del título en todas las entradas de «course».

Ahora solo tienes que cambiar el slug del CPT por el que tú hayas registrado para que el código aplique al mismo.

Por otro lado, puedes elegir el tamaño de la imagen a mostrar, en este caso sería el tamaño personalizado ‘post-image‘, pero puedes usar el que mejor te vaya.

Por ejemplo, estos son los tamaños por defecto de WordPress que podrías usar:

// Tamaños por defecto de WordPress
the_post_thumbnail( 'thumbnail' );     // Miniatura (150 x 150px)
the_post_thumbnail( 'medium' );        // Medio (300 x 300 máxima altura de 300px)
the_post_thumbnail( 'medium_large' );  // Medio grande (768 x 0 altura infinita)
the_post_thumbnail( 'large' );         // Grande (1024 x 1024 máxima altura de 1024px)
the_post_thumbnail( 'full' );          // Máxima resolución (tamaño original subido a la librería)

Puedes terminar de ajustar la distancia de la imagen al título con un poco de CSS.

Por ejemplo, en Genesis Sample queda muy pegada y añadir este snippet al final del style.css permite que el diseño respire mejor.

// Ajustar distancia al título
.single-post .attachment-post-image {
    padding-bottom: 20px;
}

Conclusiones

¿Ves qué fácil? Con un pequeño fragmento de código te aseguras de que la imagen destacada aparezca justo debajo del título en las entradas de un Custom Post Type para cualquier plantilla de Genesis Framework.

Si tienes alguna pregunta sobre el tutorial puedes dejarla en los comentarios y trataré de resolverla lo antes posible.

¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.

Ventajas de ser suscriptor. 😉