Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Imagen destacada en un post en WordPress: sacándole partido a post_thumbnail

Imago voragine.net

WordPress permite desde su versión 2.9 seleccionar una de las imágenes que adjuntamos a una entrada como destacada (featured image). Esto se puede hacer desde el editor: en la página de edición del post, una vez hayamos habilitado esta capacidad en nuestro theme, aparecerá una nueva caja desde la que podemos seleccionar la imagen que vamos a usar como destacada.

La funcionalidad featured image permite programar con mucha más flexibilidad cómo se muestran las imágenes asociadas a un post. Además provee una manera de gestionar las imágenes destacadas que no es tediosa ni difícil para los editores.

Para habilitar esta capacidad en nuestra plantilla tenemos que añadir la siguiente línea de código al archivo functions.php del theme:

add_theme_support( 'post-thumbnails' );

En el caso de que queramos habilitar el uso de imágenes destacadas en un custom post type, basta añadir el valor thumbnail a la opción support de la función register_post_type(), también en el functions.php. Por ejemplo:

'supports' => array('title', 'editor','excerpt','custom-fields','author','page-attributes','thumbnail')

Para jugar con la imagen destacada en nuestro tema, tenemos un conjunto de funciones que nos permiten saber cuándo un post tiene imagen destacada y, en ese caso, mostrarla dónde y cómo queramos.

El siguiente código dentro del loop de WordPress, devuelve la imagen destacada separada del contenido del post, en el caso de que la entrada tenga alguna:

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
}
the_content();

23 comentarios

  1. y si quiero mostrar por un lado la imagen destacada como entrada del post pero luego que esa imagen no se muestre y se muestro solo el post?.

    No sé si me explicado correctamente…

    1. Hola profesor,

      depende de dónde quieras mostrar cada cosa. Si por ejemplo, quieres mostrar los thumbnails en los posts de la portada pero no en sus archivos single.php respectivos, es un tema de plantillas.

      Si lo que quieres es mostrar unas veces sí y otras no los thumbnails de los posts, en función de una condición, digamos por ejemplo la pertenencia a una determinada categoría, puedes usar una sentencia condicional.

      Para más información sobre las sentencias condicionales en WordPress: http://codex.wordpress.org/Conditional_Tags.

    • Por Luis

    Hola, tengo una web sobre WordPress y el problema que tengo es que la imagen destacada también se ve dentro del post.

    Por ejemplo, uso la imagen destacada para la pagina de inicio, pero al entrar al post quiero que se vea un video. El problema es que se ve el video y también la imagen destacada.

    ¿Se puede evitar?
    Saludos y Gracias, Luis

    1. Hola Luis,

      sí, claro que se puede evitar. Tienes que eliminar de la plantilla que genera la página de un post (normalmente single.php) la función que está llamando a la imagen destacada: casi con toda seguridad debe ser the_post_thumbnail().

      Elimina esa función del single.php.

    • Por JorgeCid

    Hola skotperez, cabe destacar que me gusto mucho tu articulo explica todo muy facil y preciso, pero creo que el hecho de que mi tema sea diferente no lo hace funcionar igual… quiero que aparezca la imagen destacada dentro del articulo… que me recomendarias? ya que lo intente todo y simplemente no pasa nada…

    y de paso sabes como puedo ver el tamaño del sidebar? aparte de cambiar el tamaño quiero agregar el plugin de entradas populares pero necesito el tamaño del sidebar y no lo veo por ningun lado las dimensiones

    1. Hola JorgeCid,

      si lo que quieres es que la imagen destacada aparezca en la página de un artículo, tienes que añadir el último código que aparece en este tutorial en la plantilla single.php de tu theme.

      En cuanto al ancho de tu sidebar. Si es la web que has introducido al comentar, tiene un ancho variable en función del ancho de la ventana del navegador, ya que el theme es responsive. Quizás como ancho puedas darle un porcentaje, prueba 100% por ejemplo.

    • Por Alique

    Yo tengo un problema, estoy haciendo un sitio con este CMS y quiero colocar imágenes distintas de detalle y las que vendrían a ser las principales de los single.php. En su defecto estoy tratando de escalarlas o cropearlas con add_image_size(); pero no logro otra cosa que me reduzca la imagen principal (la grande) al tamaño ancho seteado en la del thumb, no se si me explico bien… cualquier ayuda será bien agradecida!

    Un saludo!

    1. Hola Alique,

      no entiendo muy bien la pregunta. En cualquier caso, add_image_size lo que hace es añadir un nuevo tamaño de imagen al sistema, para que al subir una imagen a WordPress se genere una versión más de la imagen al tamaño configurado con add_image_size.

      Recuerda que al añadir nuevos tamaños tienes que añadir también sus nombres al listado con el hook image_size_names_choose.

  2. Hola antes que nada, gracias por la información, me ha aclarado muchas cosas.
    Yo tengo una duda, tengo un blog wordpress (con la plantilla Twenty eleven), el caso es que por defecto la plantilla no trae la opción de poder mostrar en la pagina de inicio un resumen de mis entradas con foto. Entonces yo a través de una modificación en el content.php la he puesto, la cosa es que me sale muy pequeña y no se como ponerla mas grande.
    Me podrías indicar donde debo modificar?

    Un saludo y gracias de antemano!

    1. Hola Montse,

      la función the_post_thumbnail() puede invocarse con dos parámetros. El primero de ellos define el tamaño de la imagen. Por ejemplo para que la función te devuelva el tamaño medio:

      the_post_thumbnail("medium");

    • Por sara •

    puedo poner en lugar de una imagen destacada un slider de fotos? el artículo me deja ponerlo pero se situa a un lado con el texto y lo que quiero es ponerlo como cabecera, igual que hace la imagen destacada.
    Lo necesito para mi empresa

    Muchas gracias

    un saludo

    1. Hola Sara,

      la imagen destacada (post_thumbnail) es única para cada post, así que no está pensada para hacer slides.

    • Por Francisco •

    Cuando trato de poner una imagen destacada con la opción de Usar como imagen destacada de wordpress me sale un mensaje de que hay error y que no se puede cargar, pese a que la imagen no es muy grande (menor a 40 Kb) agradecería que alguien me ayudara.

    Saludos

    1. Hola Francisco, ¿puedes escribir aquí el error? Sin el error es difícil saber qué ocurre.

    • Por Jaime Castrillon •

    Hola Amigo,
    Como hago para poder agregar una imagen destacada dentro de la página de blogs?
    Tengo una página marcada como página de entradas (para la parte del blog) , ésta página tiene una imagen destacada y al momento de verla muestra todas las entradas del blog, pero no muestra la imagen.
    Sabes algo al respecto?
    De antemano muchas gracias.

    1. Hola Jaime,

      la página de entradas para en WordPress es una manera de conseguir un listado de entradas: aunque es una página no funciona exactamente con tal, como el resto de páginas. Por ejemplo, en vez de mostrar el contenido de esa página, muestra el listado de posts. Lo mismo ocurre con la imagen destacada que configures en dicha página: no se mostrará.

    • Por Pablo •

    Hola, me funcionó pero ahora ademas de mostrar la imagen en los POST de la portada del sitio, me muestra todo el texto completo en lugar del resumen como lo hacia antes de incluir el nuevo código, dejo el código completo para revisar.

    Muchas gracias.

    <article id="post-” >

    <?php
    if ( ( is_singular() || 'content' == $bavotasan_theme_options['excerpt_content'] ) && 'main' == $mb_content_area && ! is_archive() && ! is_search() ) {
    the_content( 'Leer más →' );
    } else {
    $image_name = ( 'main' == $mb_content_area ) ? 'thumbnail' : '1_column';
    if ( is_home() ) {
    $image_name = '1_column';
    $image_name = ( 'three-col c4' == $class ) ? '3_column' : $image_name;
    $image_name = ( 'two-col c6' == $class ) ? '2_column' : $image_name;
    }

    if( has_post_thumbnail() ) {
    echo '‘;
    the_post_thumbnail( $image_name, array( ‘class’ => ‘alignleft’ ) );
    echo ‘
    ‘;
    }
    the_excerpt();

    /////////////////////////////////////////

    if ( has_post_thumbnail() ) {
    the_post_thumbnail();
    }
    the_content();

    /////////////////////////////////////////
    }
    ?>

    <!– #post- –>

    • Por admin

    Hola Pablo,

    puedes eliminar las siguientes líneas:

    Y sustituirlas por:

    • Por Cesar Ceballos •

    Hola buen dia, tengo un problema mi tema crea un slider de una categoria especifica por ejemplo “las entradas con la categoria slider y asignada una imagen destacada” con esto se muestra la imagen destacada y se desliza mi pregunta es puedo usar un video o una imagen gif en la imagen destacada para que sea esos elementos que se deslizen???? gracias :)

    1. Hola César, depende de cómo esté programado el theme que estés usando.

      Lo normal es que no se pueda ya que WordPress genera varias versiones (distintos tamaños para usar en distintos sitios de la web) de cada imagen que se añade a la web mediante el gestor de medios. A partir de la imagen original WordPress genera las versiones en formato PNG o JPG.

      Para la imagen destacada WordPress suele usar una de estas versiones, la versión thumbnail.

    • Por jp •

    Profesor como esta, una consulta como puedeo mantener el slider de fotos en todas las paginas.
    O depende mucho del Tema que estoy utilizando.

    mucha gracias por el apoyo

    1. Hola jp, efectivamente depende por completo del tema que estés usando.

    • Por Begoña •

    Hola, muchas gracias por este post, es de gran ayuda pero no acabo de encontrar solución a mi problema.
    El problema está en que la imagen destacada del post pierde calidad en relación a las imágenes que hay insertadas en la entrada.

    El ejemplo en esta entrada:

    http://ahoravasylocascas.es/cascablog/inauguracion-la-moderna/

    La imagen destacada es la misma que la primera de la entrada pero como verás con muchísima diferencia en la resolución (la imagen es la misma). En realidad lo que está haciendo WordPress es bajar la resolución en la imagen destacada y no se porqué.
    Aparentemente el style está bien y el functions.php también aunque en éste último me pierdo un poco.

Dejar un comentario

*
*

 

Un trackback