WordPress 2.9 y la función Post Image

Al fin, con WordPress 2.9 se nos ha hecho mucho más fácil indicar, mientras escribimos, cuál será la miniatura (o thumbnail) que representará al artículo en cuestión.

Para ello, colaremos este código en functions.php (al final de todo):

<?php
add_theme_support( 'post-thumbnails' );
?>

Ahora podremos, desde la Administración, subir y asignar una imagen cuya función exclusiva será la de ‘representar’ al post, e “imprimirse” por tanto en nuestros templates, al lado del texto del artículo (pero independientemente de éste).

Iremos ahora a escoger en qué lugar concreto queremos que aparezca con respecto al contenido normal de nuestro artículo. Abriremos index.php, archive.php o incluso single.php, y allí donde creamos conveniente (normalmente al lado del extracto), pondremos lo siguiente :

<?php the_post_thumbnail( 'medium' ); ?>

Podremos utilizar la siguiente “jerga” para decidir qué tamaño queremos:

– thumbnail
– medium
– large

Habrá que orientarse entre los tags de HTML del template para poner la imagen allí donde creamos correcto.

Para saber más detalles acerca de esta novedad, podemos dirigirnos a la web de Justin Tadlock.

Comentarios
  1. Luis

    Hola, quiero añadir las miniaturas personalizadas en lugar de la opción First Image porque como sabes si tengo un post sin imágenes me sale el link roto.
    Estoy usando la nueva opción de wordpress de Establecer Miniatura, pero no me aparece, veo que hablas de que hay que tocar algunas lineas de código (o eso me parece a mí), pero como no estoy seguro y no controlo mucho prefiero que me lo aclareis mejor.
    ¿Con la nueva opción no debería ser tan sencillo como establecer la imagen congiéndola de la biblioteca y ya está?
    Muchas gracias.

    Escrito el25/02/2010
  2. Luis, cuando estés escribiendo el post, y abras la Biblioteca de Imágenes, tendrás que buscar la miniatura que te interese, expandirla, y seleccionar ‘establecer miniatura’.

    Para que ello sea posible sin embargo, antes tendrás que haber escrito en functions.php el código que propongo en primer lugar, y es entonces que aparecerá, al final de la página mientras aún estás editando, el thumbnail seleccionado, recortado según las dimensiones que le hayas dado en Settings > Media.

    Paralelamente, puedes escoger, antes de cerrar la Biblioteca de Imágenes, insertar la imagen a plenas dimensiones en el artículo como usualmente se hacía (saldrá en la página individual de artículo).

    Ahora, la imagen (thumbnail) debería estar asociada a ése artículo, pero aún necesitamos que nuestro template (index.php de tu tema), la recoja. Es entonces que tienes que escribir el segundo pedazo de código que propongo y ponerlo al lado de the_excerpt por ejemplo.

    No dudes en preguntar más si aún te falta info.

    Escrito el25/02/2010
  3. Luis

    Gracias por responder ante todo. Ahora te cuento, cuando le doy a establecer miniatura sí me aparece la imagen abajo del post. Ayer actualicé el wordpress y alo mejor es una de las nuevas mejoras, puede ser?
    Con ponerlo al lado de the_except te refieres a meterlo dentro de los paréntesis (como puedes ver estoy muy verde).
    Te pongo mi web para que la veas, ahora tengo puesta la opción de Fist Image, en la que pone de miniatura la primera imagen del post, pero como en la cronica del concierto no tengo imagen, me sale rota.
    Para que me saliesen todas las miniaturas (las de la derecha en cateorías o las de abajo en random posts) tengo que modificar más archivos a parte del index.php.
    Muchas gracias y perdona por la tabarra.

    Escrito el25/02/2010
  4. @Luis sí, es una novedad de la versión 2.9.

    Como verás en los templates, the_excerpt(); se abre y cierra con declaraciones de php.

    Dentro de esa “isla” de código no hay que escribir nada, pero sí al lado, formando una isla similar con el código que te propongo.

    Tendrás que ponerlo en todos los loops donde quieras la imagen (pero desactiva First Image).

    La sidebar o los random posts seguramente tienen un loop propio, en un archivo .php propio, y habría que modificarlos también.

    Busca siempre the_excerpt(); y añade el código al lado, de esta forma no te puedes equivocar.

    Escrito el25/02/2010
  5. Luis

    Genial!! Como me has dicho me funciona, pero he descubierto una opción no la domino del todo bien…: Creo un campo personalizado llamado “Image” y en el valor le pongo la URL de la imagen, me sale perfecto, lo único es que también se me añade la imagen al contenido del post, así que, si ya la tenía se me duplica. Y si quito la que yo había puesto en el post para que no estén duplicadas no la puedo poner donde yo quiera sino que se me pone por defecto en el lado superior-izquierdo. A ver si me puedes ayudar, que ya casi lo tengo!!!

    Escrito el25/02/2010
  6. hanss1982

    El index.php de mi plantilla no cuenta con the_excerpt(), que hacer en este caso. Tambien lo he buscado en single.php y no se encuentra. Es decir por ningun lado de mi plantilla veo el the_excerpt()

    Que me recomiendan?

    Escrito el05/04/2010
  7. @Hanss, mira si tienes un archivo que se llama home.php. Junto a index.php (o en algunos casos en que se usa una página estática), son los dos archivos que pueden construír el índice de tu blog.

    Si en cualquier caso no tienes the_excerpt(); te recomiendo (como prueba), transformar, en index.php, the_content(); en the_excerpt(); y añadir justo antes de éste la llamada a la imagen :

    the_post_thumbnail( ‘medium’ );

    -siempre dentro del php-

    En realidad, ambos ‘template tags’ sirven para mostrar, ya sea el extracto (algunas frases sin imágenes), ya sea el contenido (todo el artículo con imágenes).

    Es por esto que lo interesante es tener en nuestro índice imágenes + sólo algunas frases del artículo.

    Un ejemplo de cómo puede quedar el diseño:

    http://wpengineer.com/

    Escrito el06/04/2010
  8. Miri

    Iremos ahora a escoger en qué lugar concreto queremos que aparezca con respecto al contenido normal de nuestro artículo. Abriremos index.php, archive.php o incluso single.php, y allí donde creamos conveniente (normalmente al lado del extracto), pondremos lo siguiente :

    Hola , me podéis decir donde exactamente tendría que añadir el código , en qué parte del archivo index.php? or lo poco que sé , creo que va antes de que del código que se refiere a los comentarios , os pego el que me parece antes de del código que se refiere a los comentarios para ver donde tendría que añadir

    Index.php

    <h3 class="storytitle" id="post-“><a href="” rel=”bookmark” title=””>

    Por el
     • 

    <a href="”>

    <!–

    Escrito el12/04/2010
  9. Vaya , no me dejó copiar el código , a ver si como imagen si deja :

    http://img190.imageshack.us/img190/5499/codw.jpg

    Escrito el12/04/2010
  10. Hola Miri, en este caso lo tienes que poner antes de <?php the_content(__(‘(seguir leyendo…)’)); ?>

    Es cierto que en la gran mayora de temas se usa the_content para el índice, permitiendo jugar con la división y el link “leer más”, etc.

    Estoy tan acostumbrado a usar de excerpt para eso que se me olvidó decirlo. Gracias por comentar!

    Escrito el12/04/2010
  11. Gracias por responder tan rápido.
    No he podido agradecerte hasta ahora ya que llevé el pc al servicio técnico.

    Entonces si hago lo que dices , quedaría como muestro en la imagen? (en verde señalo el código que añadí)

    Escrito el16/04/2010
  12. Hola Miri, exacto sería así, luego si quieres darle algún estilo con CSS tendrás que modificar tu style.css con algo así:

    .storycontent img{ /*estilos para tu imagen*/ }

    Luego he visto que en el artículo no pongo espacios en la función a agregar, que sería más bién así para que no te dé errores:

    <?php add_theme_support(‘post-thumbnails’); ?>

    Lo edito en breve.

    Escrito el16/04/2010
  13. Ah vale , o sea , sería todo junto , sin que quede espacio entre cada código , como lo puse yo , no?
    Muchísimas gracias.

    Escrito el17/04/2010
  14. Hola, lo hice perfecto pero no puedo lograr que me quede la imagen y al lado el txt. es posible? me podrías ayudar???? Gracias, saludos…

    Escrito el03/05/2010
  15. Hola Paola, para conseguir que la imagen flote a la izquierda del texto, puedes añadir el código con una div:

    <div class="miniatura"><?php the_post_thumbnail( ‘medium’ ); ?></div>

    Y luego, en style.css, añadir al final de todo;

    .miniatura img{float:left;margin: 0 10px 10px 0}

    También tendrás que mirar que los párrafos estén “flotando” a la izquierda si no lo estuvieran ya:

    p{float:left}

    Dime si te funciona.

    Escrito el03/05/2010
  16. que paso amigo, no se si puedas checar mi sitio tengo problemas porque no puedo hacer uqe se vean los thumbnails y com veras en los posts las imagenes salen apachurradas y no se mcuho d eprogramación jajajaja te agradezco infinitamente cualquier ayuda, gracias.

    http://www.plrty.com

    tengo el wordpress 2.9 el mas reciente.

    Escrito el24/05/2010
  17. ¿¿ya no funciona con la 3.0.1 ??

    Escrito el26/08/2010
    • @Guille: Normalmente las funciones que el equipo de WordPress implementa, las mantiene en sus futuras versiones (a no ser que sea muy antigua) con lo que en principio no tendrías que tener ningún problema para usarla en 3.0.1 (no hay tantas versiones de diferencia).

      Escrito el25/12/2010
  18. Diego

    hola a mi no me salen las imagenes el en index pero si en el post al hacer click, aca dejo el codigo del index

    <div class="”>

    ID ) ? get_post_format( $post->ID ) : ” ;
    } ?>

    <?php //num of pages
    global $paged;
    if ( !$paged ) { $paged = 1; }
    if ( $shiword_opt['shiword_navlinks'] == 1 ) { previous_posts_link( '«' ); }
    printf( '’ . __( ‘page %1$s of %2$s’, ‘shiword’ ) . ”, $paged, $wp_query->max_num_pages );
    if ( $shiword_opt[‘shiword_navlinks’] == 1 ) { next_posts_link( ‘»’); }
    ?>

    Escrito el21/03/2012

DEJA TU COMENTARIO