Como colocar thumbnails en la portada de tu blog WordPress sin usar scripts

Si llevas algún tiempo queriendo usar thumbnails en tu portada, aquí verás como 😛 .

Thumbnails o Miniaturas

Las thumbnails son imágenes pequeñas generadas a partir de otra imagen más grande. Es decir, si tenemos fotografías o imágenes grandes y no queremos colocarlas todas por el espacio que ocupan, colocamos pequeñas imágenes que enlacen a las originales. También se les conoce como miniaturas por obvias razones.
A continuación tenemos el ejemplo de un thumbnail para dejarlo claro, al hacerle click nos lleva a la imagen original, la cual es mucho más grande.
media internet

Miniaturas en WordPress con scripts

Normalmente se recurre a scripts para esta tarea, entre los más conocidos tenemos a phpThumb y TimThumb. Dichos scripts te permiten utilizar una imagen de tamaño normal y redimensionarla al tamaño que desees.
También cuentan con un sistema de cache para las imágenes y algunas otras opciones avanzadas.

Desventajas de los Scripts

Uno de los principales inconvenientes es que te generan la imagen dinámicamente, es decir, cada vez que se necesite una imagen, será creada en ese mismo instante. Se supone que el sistema de cache ayude a solventar esto, pero no siempre sale todo bien. Una mala configuración, programación o un servidor que no cumpla los requerimientos, causa lo siguiente:

  • Se crean muchos miles de archivos temporales y no se eliminan correctamente.
  • Se sobrecarga el uso del procesador por las llamadas al script.

Las consecuencias del incorrecto funcionamiento de un script puede ser fatal, sobre todo si estás alojado en un hosting compartido que es el que mayormente escogen los bloggers. Pocos pueden permitirse el elevado costo de uno virtual y mucho menos dedicado.
Si estás en un hosting compartido te pueden cancelar tu cuenta por sobrecargar el servidor. Eso se supone que está estipulado en los términos del servicio así que no hay mucho que reclamar.

Miniaturas en tu portada

Lo que la mayoría de bloggers quiere, es que aparezcan imágenes en su home(portada) enlazando a sus posts. Para ello, algunos buscan themes gratuitos que ya vienen con esto implementado, muchos de ellos incluso incorporan un Slide o carrusel que cambia de una imagen a otra automáticamente.
miniaturas

El problema es que estos themes gratuitos usan los scripts antes mencionados con sus respectivas desventajas. Incluso usan código propio o no hacen prueba de fallos para los scripts conocidos.
Puede que en un principio no te de problemas, pero lo grave llega cuando empiezas a recibir un volumen importante de visitas(incluso 5000 visitas al día podrían llevar a sobrecarga).

Como colocar miniaturas en portada

Puedes hacer esto desde cero o simplemente reemplazar las imágenes en los themes gratuitos que estás usando.
Para reemplazar, primero ubicas el código de las imágenes dinámicas, tienen esta forma:

TimThumb

1
<img src="http://dominio.com/wp-content/themes/magazeen/timthumb.php?src=http://dominio.com/wp-content/uploads/2010/04/imagengrande.jpg&w=109&h=60&zc=1" />

Thumb

1
<img src="http://dominio.com/comfy/wp-content/themes/comfy/thumb.php?src=http://d.yimg.com/a/p/rids/20100205/i/r782429080.jpg&amp;w=180&amp;h=130&amp;zc=1&amp;cropfrom=topcenter&amp;q=100" />

phpThumb

1
<img src="/uploads/phpThumb.php?src=images/src=images/wordpress-logo.png&sx=0&sy=0&sw=115&sh=115&f=png" />

Ahora lo que necesitamos es un código que nos dé una miniatura de la imagen de nuestro post. Pero antes debemos decirle a WordPress de que tamaño queremos los thumbnails.
Entramos en Settings > Media e indicamos el tamaño deseado para las miniaturas.
tamaño thumbnail

Si por ejemplo queremos mostrar en portada 2 tamaños diferentes de miniaturas(uno para el Slide y otro para los últimos posts), de 100×100 y de 150×150, entonces indicamos aquí el mayor tamaño. Y cuando usemos las miniaturas para el de 100×100, simplemente lo indicamos con los atributos width y height en la etiqueta img.

Importante: Una vez configurado el tamaño de los thumbnails, recién desde ese momento se crearán las miniaturas cuando subas imágenes en tus posts. Si quieres que se creen miniaturas con el nuevo tamaño en posts antiguos, deberás volver a subir las imágenes originales del post.
Lo bueno es que sólo necesitas subir la imagen original al post y no rellenar para nada ningún custom field.

Código para llamar la imagen thumbnail
Esto es para crear la imagen en una variable php, se coloca en el index(o home).php dentro del bucle donde se crean los posts, justo antes de colocar la miniatura.
Podemos cambiar los valores de $image[1] y $image[2] que son el ancho y alto de la imagen por un tamaño menor que se ajuste a nuestras necesidades como por ejemplo 100×100.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'numberposts' => -1,
        'order' => 'ASC',
    'post_status' => null,
    'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
    foreach ($attachments as $attachment) {
$image = wp_get_attachment_image_src( $attachment->ID );
$miniatura= '<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="'.get_the_title().'" title="'.get_the_title().'" />';
//$miniatura= '<img src="'.$image[0].'" width="'100" height="100" alt="'.get_the_title().'" title="'.get_the_title().'" />';

                break;
        }
}
?>

Este es el código de la miniatura, normalmente la imagen va con un link al post.

1
<a href="<?php the_permalink(); ?>"><?php echo($miniatura); ?></a>

Y ese sería todo el código, se puede usar tanto en index.php para la portada, en archive.php para las categorías y archivos, en search.php para las búsquedas e incluso en el sidebar si es que creas un bucle de recuperación posts.

Pero por si les quedó la duda de donde exactamente colocar el código, aquí se los pongo más junto para que se guíen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<ul id="latest_videos">

<?php global $wp_query; $wp_query->in_the_loop = true; ?>
<?php while ($latest_videos->have_posts()) : $latest_videos->the_post(); ?>
    <li>
   
    <div class="thumb">
<?php
$args = array(
    'post_type' => 'attachment',
    'post_mime_type' => 'image',
    'numberposts' => -1,
        'order' => 'ASC',
    'post_status' => null,
    'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
    foreach ($attachments as $attachment) {
$image = wp_get_attachment_image_src( $attachment->ID );
$miniatura= '<img src="'.$image[0].'" alt="'.get_the_title().'" title="'.get_the_title().'" />';
                break;

        }
}
?>
<a href="<?php the_permalink(); ?>">
<?php echo($miniatura); ?>
</a><a href="<?php the_permalink(); ?>" title="Watch Video" class="watch"></a>
</div>

Finalmente

Espero que les sirva, les recomiendo mil veces este método antes que los scripts porque son muy problemáticos. Aunque hey, nadie los detiene si quieren usarlos 😎 . Sólo recuerden volver aquí cuando les lleguen los avisos del hosting 😛 .

Si no te quieres perder ningún detalle de estos artículos, suscríbete a mi feed con tu lector preferido o vía email en la parte derecha de la página.


15 comments

  1. Excelente articulo, nunca se me hubise imaginado hacerlo de esa forma sin utilizar ningun script… Se Agradece por la info…

  2. Hola. A veces quiero cambiar la foto, el thumbail. Todo bien hasta que lo subo al post, pero cuando actualizo no cambia el thumbail, solo la foto que está dentro del artículo.

  3. tio te quiero, muchísimas gracias de verdad, me has abierto el cielo, llevaba mucho tiempo intentando hacer esto!!!!!

  4. Hola de nuevo, una pregunta que llevo varios días o semanas dándole vueltas y no lo consigo…

    Si en vez de poner un enlace en la miniatura hacia el post (), quisiera poner un enlace hacia la imagen en grande??? sería posible?? Eso sería realmente genial para poder jugar con las dos opciones.

    Muchas gracias de nuevo de verdad, espero que puedas ayudarme! gracias!!! un saludo!

  5. He probado este código y otros parecidos que también usan la función wp_get_attachment_image_src, todos funcionan ok pero al modificar la imagen de post o borrarla sigue mostrando la antigua… ¿por qué puede ser esto? Gracias por la ayuda 🙂

  6. phpThumb y TimThumb son lo peor que un programador pueda usar. Muchachos eso es un error grave y grande. Yo pasé de compartido a VPS y dicho script sobrecargaba un 40% mi portal. ahora estoy limpiando todo esos llamados. gracias por el post. les contaré que soluciones encontré.

  7. Ocurre algo con el uso del sistema integrado en wordpress, pasa que si la imagen la alojas en un sitio diferente al tuyo, wordpress parece no identificarla y no reconoce ninguna imagen como miniatura.

  8. ¿Cómo se haria para poder hacer como en los themes tipo “magazine” donde el último artículo posteado sale con una imagen grande y el resto de los post, más abajo, muestran los thumbnails?

Leave a Reply

Your email address will not be published. Required fields are marked *