Para mejorar el theme de nuestro blog WordPress, una de las cosas más vistosas y funcionales que últimamente se esá poniendo muy de moda son los thumbnails para los posts - podríamos decir que son una imagen que asociamos a un post para identificarlo. Nos ofrecen diferentes ventajas:
- Nos dan más libertad en el diseño en cuanto a que la imagen no tiene que estar dentro del contenido del post.
- Nos dan más libertad en el diseño en cuanto a que la imagen se puede adaptar en dimensiones a donde la queramos poner. Esto quiere decir que en el home del blog la imagen puede ser de 125px x 125px y en la página del post 200px x 200 px.
- Nos "obligan" a currarnoslo para poner una imagen como mínimo para cada post - según se cuenta esto es bastante importante.
Dicho lo dicho, vamos a ver como funciona Simple Post Thumbnails, un plugin para WP que nos ayuda con este tema. La parte de la instalación me la voy a saltar porque es la misma que para cualquier otro plugin para WordPress. Tenemos que tener en cuenta:
Configurando Simple Post Thumbnails
En Opciones>Thumbnail Options podemos:- Escojer la imagen que se mostrará por defecto si no insertamos un thumbnail a un post. insertamos la URL de la imagen y listos.
- Escojer el formato de los thumbnails. Así, si por ejemplo subimos una imagen en PNG, podemos convertirla en JPG para mostrarla. Podemos escojer convertirlas en JPG, PNG o GIF (se recomienda la primera para fotos). En nuestr ejemplo vamos a usar 200px x 200px
- Escojer la altura y ancho de los thumbnails a la hora de guardarlos. Luego se podrán modificar a la hora de mostrarlos.
Cómo subir los thumbnails
A la hora de escribir o editar un post en el panel de administración de WordPress, una vez instalado el plugin, encontraremos una nueva caja para subir el archivo desde nuestro ordenador o desde una URL ¡Más sencillo imposible!Insertar los thumbnails en el diseño de nuestro blog
Miren la parte de nuestro código en que se muestra un post en el index.php de nuestro blog. Imaginemos que queremos mostrar su thumbnail a la izquierda a un tamaño de 125x125 (aunque anteriormente hemos configurado que los thumbnails serían guardados a 200x200). El código original que teníamos era:Código :
<div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <p><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></p> -------------------------------------------------------------------------------------------------------------------- <?php the_content('Read the rest of this entry »'); ?> <p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div>
Esto hace que en nuestro blog se vea lo siguiente:
El código para mostrar un thumbnail es el siguiente:
Código :
p75GetThumbnail(int $IDdelPost, [int $ancho, [int $altura, [string $TipoDeArchivo]]])
Siguiendo con el ejemplo anterior, y poniendo la imagen a la izquierda, lo que hacemos, es obtener la URL de una imagen relacionada a un post x ($post->ID), de altura y ancho 125 px, añadirle el nombre del post (alt="<?php the_title_attribute(); ?>") y posicionarlo a la izquierda:
Código :
<div style="float: left;"><img src="<?php echo p75GetThumbnail($post->ID, 125, 125); ?>" alt="<?php the_title_attribute(); ?>" /></div>
Este código iría en la línea de guiones del código inicial. Sencillo, ¿verdad?
Y quedaría un poco feo - el diseño ya era feo de por si...
Pero vamos a ir un poco más allá. Como supongo que sabréis, el archivo single.php es el se encarga de la página de los posts - el que crea los permalinks, por así decirlo. Lo que vamos a hacer es que en esta página el thumbnail se ponga a la izquierda con unas dimensiones de 200px x 200 px. lo que veíamos originalmente en esta página (en la parte del post) es lo siguiente:
La parte original del post en esta página es:
Código :
<div class="post" id="post-<?php the_ID(); ?>"> <h2><?php the_title(); ?></h2> ----------------------------------------------------------------------------------------------------------- <?php the_content('<p>Read the rest of this entry »</p>'); ?> <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?> <?php the_tags( '<p>Tags: ', ', ', '</p>'); ?> <p> This entry was posted <?php $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime); echo ' ago'; ?> on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?> and is filed under <?php the_category(', ') ?>. You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?> feed. <?php if (('open' == $post-> comment_status) && ('open' == $post->ping_status)) { // Both Comments and Pings are open ?> You can <a href="#respond">leave a response</a>, or <a href="<?php trackback_url(); ?>" rel="trackback">trackback</a> from your own site. <?php } elseif (!('open' == $post-> comment_status) && ('open' == $post->ping_status)) { // Only Pings are Open ?> Responses are currently closed, but you can <a href="<?php trackback_url(); ?> " rel="trackback">trackback</a> from your own site. <?php } elseif (('open' == $post-> comment_status) && !('open' == $post->ping_status)) { // Comments are open, Pings are not ?> You can skip to the end and leave a response. Pinging is currently not allowed. <?php } elseif (!('open' == $post-> comment_status) && !('open' == $post->ping_status)) { // Neither Comments, nor Pings are open ?> Both comments and pings are currently closed. <?php } edit_post_link('Edit this entry','','.'); ?> </p> </div>
Supongo que ya tendréis claro que insertaríamos aquí... Obviamente:
Código :
<div style="float: right;"><img src="<?php echo p75GetThumbnail($post->ID, 200, 200); ?>" alt="<?php the_title_attribute(); ?>" /></div>
Y aquí lo tenemos:
Espero que hos haya gustado mi primer articulo. Realmente lo he hecho para ver que tal cuaja un post de este tipo. A lomejor tendría que probar con un screencast. Sea como fuere, decirme que tal hos ha parecido.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Freddie el 22 de Julio de 2009
Gracias por el tip.
Por Raul el 22 de Julio de 2009
Por [Ray] el 22 de Julio de 2009
Buen tip, no conocía ese plugin.
Por Zguillez el 22 de Julio de 2009
Por jackbach el 23 de Julio de 2009
Con los campos personalizados también se puede hacer, pero es más código...
Por Javier el 20 de Octubre de 2009
estoy ya desesperado. jajaja
Un abrazo y muchas gracias
Por javi el 20 de Octubre de 2009
Gracias de nuevo
Por javi el 20 de Octubre de 2009
Despues me tocara pelear, para que Recent Articles tambien funcione. Lo bueno es que dos cositas ya consigue que funcionara.
Por jackbach el 20 de Octubre de 2009
Para empezar, tengo que decir que han habido diferentes actualizaciones del plugin que no he investigado, aunque no creo que hayan modificado nada de lo que pone en el tip. Si no han cambiado nada te recomiendo que te asegures de que el código de la imagen está dentro del loop de posts, como muestro en el tip.
Por otra parte puedes investigar lo que decia de las actualizaciones en la página del plugin que dejé...
Por vladycid el 20 de Diciembre de 2009
u
Me gustaria saber si a esa imagen luego quiero ponerle un borde, que tendria que escribir en la linea que ya tienes para que salga con este borde.
Muchas gracias.
Por Fernando el 26 de Diciembre de 2009
Disculpa, tengo un problema.
Ahorita estoy probando el plugin en un host gratuito, 000webhost, ya inserte el codigo: <img src="<?php echo p75GetThumbnail($post->ID, 125, 125); ?>" alt="
<?php the_title_attribute(); ?>
" /> dentro del codigo del post, pero al momento de abrir la pagina, la imagen no sale, sino que es representada por el titulo del post, una vez que intento ver la imagen, me sale el siguiente error unas 5 veces:
Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/usr/local/apache/htdocs/www/blog/wp-content/thumbnails/16.jpg) is not within the allowed path(s): (/home/:/usr/lib/php:/tmp) in /home/a6500798/public_html/blog/wp-content/plugins/simple-post-thumbnails/timthumb.php on line 599
A que crees que se deba?
Por Fairy el 09 de Marzo de 2010
Por Dongee el 02 de Julio de 2010
Por bbrian el 14 de Julio de 2010
Por Marco Nuñez el 23 de Febrero de 2011
saludos