Es cierto, ahora más que nunca, el contenido es el rey. No lo digo yo, lo dice Google. Pero una mala maquetación sumada a una mala apariencia resta muchos puntos a ese buen contenido. Es por ello que me gusta hacer webs coherentes en diseño. Esto quiere decir que si decido colocar una imagen destacada en cada entrada para hacer más visual un blog, lo hago en todas las entradas y además procuro que esas imágenes mantengan un mismo estilo. Y lo hago con el mismo tamaño de imagen para conseguir esa coherencia de la que hablábamos. Es por ello que no me gusta como se comporta Genesis con las imágenes destacadas.
La imagen destacada es algo que viene configurado en Genesis de manera que, por defecto, de no estar definida para esa entrada, coloca como imagen destacada la primera imagen que figure en el propio artículo.
Es así, tanto en el propio framework, como en el tema Genesis Sample Theme, que es en el que está basado el tema de mi portfolio.
La imagen destacada sólo en las entradas
Como con casi todo en Genesis hay varias maneras de hacer las cosas. Esta función, a mi parecer, es uno de los modos más limpios. , la función será de una manera u otra dependiendo de donde queramos mostrar la imagen destacada.
Dado que yo sólo quiero mostrar la imagen destacada dentro de cada entrada, si colocamos la función en el fichero funtions.php, deberá incluir un condicional que le indique a Genesis que haga eso mismo. Sería algo así.
/*
* Mostramos la imagen destacada en la parte superior de cada entrada
*/
add_action( 'genesis_entry_content', 'featured_post_image', 8 );
function featured_post_image() {
if ( ! is_singular( 'post' ) )
return;
the_post_thumbnail('large');
}
/*
* Y eliminamos la función de Genesis para que no cargue
* las imágenes del propio post en caso de no definir una destacada.
*/
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
remove_action( 'genesis_post_content', 'genesis_do_post_image' );A mi me gusta la imagen destacada entre el título y el contenido. He usado el hook genesis_before_entry_content que sitúa la imagen justo en ese punto. Podéis usar cualquier otro hook y así situar la imagen donde queráis. Para visualizar los distintos hooks yo uso el plugin Genesis Visual Hook Guide.
El parámetro ‘large‘ que le he dado a la función the_post_thumbnail es simplemente para decirle en que tamaño quiero que muestre la imagen destacada. Estos tamaños los configuramos en WordPress en la sección Ajustes→Medios.
Los tamaños de imagen por defecto en WordPress son estos.
//Por defecto en WordPress
the_post_thumbnail('thumbnail'); // Thumbnail (150 x 150 Cortado de imagen)
the_post_thumbnail( 'medium'); // Resolución media (300 x 300 altura máxima 300px)
the_post_thumbnail( 'medium_large'); // Largo medio (añadido en WP 4.4) Resolución (768 x 0 altura infinita )
the_post_thumbnail( 'large'); // Resolución larga(1024 x 1024 altura máxima 1024px)
the_post_thumbnail( 'full'); // Resolución completa (tamaño original de imagen)Imágenes destacadas en toda la estructura de la web
Siempre me han gustado los diseños que se centran en dar énfasis al contenido más que a la apariencia en si. Tampoco por ello vamos a sacrificar estética ni apariencia, pero siempre me han gustado más los diseños minimalistas o que tienden a ese estilo.
Es por ello que quería mostrar la imagen destacada dentro de las entradas, pero no siempre eso es lo que se necesita. De hecho, en ocasiones se requiere lo contrario. Muchas veces el producto que queremos promocionar o vender es muy visual y se buscan grandes y muy vistosas imágenes. Es por ello, que nos convendría mostrar esas imágenes a los largo de toda la estructura de nuestra web.
/*
* Mostramos la imagen destacada siempre y cuando esté definida,
* en caso contrario no se mostrará imagen ninguna.
*/
add_action( 'genesis_entry_content', 'featured_post_image', 8 );
function featured_post_image() {
if ( ! has_post_thumbnail() )
return;
the_post_thumbnail('post-image');
}
/*
* Y eliminamos la función de Genesis para que no cargue
* las imágenes del propio post en caso de no definir una destacada.
*/
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );
remove_action( 'genesis_post_content', 'genesis_do_post_image' );Hemos asignado el parámetro post-image a la función the_post_thumbnail que más abajo veremos.
De nuevo para no depender de la función de Genesis y tener control sobre lo que mostramos y cómo lo mostramos, eliminamos el genesis_do_post_image.
Además si la entrada no tiene asignada una imagen destacada no mostrará nada. Así evitaremos que WordPress muestre la primera imagen del cuerpo del artículo, que no siempre es conveniente, como ya hemos explicado. Si subimos las imágenes de la misma medida nos aseguramos de que mantenga esa concordancia en el diseño.
Añadir tamaños de imagen
Para no vernos limitados a la hora de asignar tamaños de imagen a las 3 posibilidades que nos da WordPress por defecto, podemos añadir las nuestras propias. Para esto debemos incluir en nuestro functions.php las siguientes líneas.
// Image size for single posts
add_image_size( 'post-image', 780, 420 );Esto añade el tamaño post-image que es el que hemos utilizado en la segunda función para declarar las imágenes destacadas.
Movemos la función a single.php
En el caso de que hayáis creado en vuestro tema hijo de Genesis (child theme), un archivo single.php para modificar la plantilla de las entradas, podéis colocar allí la función. En ese caso prescindiremos del condicional, ya que WordPress sólo leerá este archivo en caso de mostrar una entrada.
/* Mostramos imagen destacada dentro de cada post */
add_action( 'genesis_entry_header', 'wp_featured_post_image', 8 );
function wp_featured_post_image() {
the_post_thumbnail('post-image');
}Lo dicho, lo único que he hecho es prescindir del condicional. Además, he cambiado el hook de Genesis usando en este caso genesis_entry_header. Esto mostrará la imagen justo encima del titulo de la entrada. Otro estilo ;).
Eso sí, deberemos mantener en nuestro function.php las lineas que eliminan la función de Genesis referente a las imágenes destacadas.
Para más información acerca de como se comporta WordPress con las plantillas de una web, podéis echar un vistazo al esquema de Jerarquía de Plantillas de WordPress.