Existen varios plugins de WordPress que te generan Thumbs a partir las imágenes dentro de un post, de tal manera que el index (home) de tu blog muestra una pequeña imagen para cada post, pero la mayoría de estos plugins requieren que estas imágenes las tengas hospedadas en tu servidor, y las subas desde el panel de control de tu WordPress.
Siendo que me preferencia personal (como la de otros) es el hospedar las imágenes en otro servidor (algunos usan un CloudFront, Amazon AWS, content delivery service, etc) estas soluciones pueden resultar ineficientes. En mi caso opté por un servicio de hospedaje de imágenes (para ahorrar bandwith, CPU y no lidear con el hotlinking), por lo que uso una cuenta PRO en ImgUr (se los recomiendo). De igual manera la mayoría de los vídeos que se publican en el blog son de YouTube, y por estos motivos no encontraba un plugin, función interna, o script que genere thumbs para mi index bajo estas características.
Nota: Si tu si hospedas las imágenes en tu blog, te recomiendo que directamente uses la función the_post_thumbnail(); disponible desde WordPress 2.9
Como extraer una imagen thumbnail de un post
A continuación veremos una función que se encargará de analizar el contenido de un post y extraer el código necesario para generar un thumbnail. Esto es muy útil para templates antiguos o sino usas la nueva funcionalidad de las recientes versiones de WordPress, o si como yo, usas un host externo para tener tus archivos en otro server y servicio.
El siguiente código es una mejora realizada al trabajo de Vladimir en Prevolac, él hizo la base principal para que todo funcione, su código detecta las imágenes en un post y los videos de YouTube. Con YouTube tuvo éxito, extrae un pequeño thumbnail hospedado y generado en el mismo servicio. Pero cuando detecta una imagen lo que hace es capturar su URL y ponerle width=”150″, pero no es una imagen pequeña, sigue siendo una pesada imagen reducida sólo en dimenciones, una fantasía sin ninguna ventaja de disminuir el peso de la página, nada óptimo.
El nuevo código que personalicé, identifica si la imagen del post es de IMGUR y de ser así extrae el ID y genera un thumbnail con tamaño BIG SQUARE, un verdadero thumb
El resultado se ve así:
El Loop
Para crear thumbs en cada post del index, necesitas poner el siguiente código en tu Plantilla de la página principal (index.php), dentro del loop (debajo de <?php while (have_posts()) : the_post(); ?>
)
<a href="<?php the_permalink() ?>"><?php global $post; $thumb=vp_get_thumb_url($post->post_content); if ($thumb!='') echo '<img width:140px;" src="'.$thumb.'" alt="'. get_the_title().'" />'; ?></a>
Tienes que editar el valor del width para el tamaño en el que desees tener tus thumbs.
El código además enlaza cada thumb con el post respectivo y crea tags de ALT con el título del post, así que trae algo de SEO.
Funciones
Pon el siguiente código en tus Funciones del tema (functions.php):
function vp_get_thumb_url($text)
{
global $post;
$imageurl="";
// extrae las imagenes adjuntas
$allimages =&get_children('post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
foreach ($allimages as $img){
$img_src = wp_get_attachment_image_src($img->ID);
break;
}
$imageurl=$img_src[0];
// intenta capturar una imagen
if (!$imageurl)
{
preg_match("/([a-zA-Z0-9\-\_]+\.|)\i.imgur\.com\/([a-zA-Z0-9\-\_]{7})([^<\s]*)/", $text, $matches2);
$imgurlink = $matches2[0];
if ($imgurlink)
$imageurl = "http://i.imgur.com/{$matches2[2]}b.jpg";
}
if (!$imageurl)
{
preg_match('/<\s*img [^\>]*src\s*=\s*[\""\']?([^\""\'>]*)/i' , $text, $matches);
$imageurl=$matches[1];
}
// busca el thumbnail de youtube
if (!$imageurl)
{
preg_match("/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/watch(\?v\=|\/v\/)([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $text, $matches2);
$youtubeurl = $matches2[0];
if ($youtubeurl)
$imageurl = "http://i.ytimg.com/vi/{$matches2[3]}/1.jpg";
else preg_match("/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/(v\/)([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $text, $matches2);
$youtubeurl = $matches2[0];
if ($youtubeurl)
$imageurl = "http://i.ytimg.com/vi/{$matches2[3]}/0.jpg";
}
if (!$imageurl)
{
// debes cambiar la URL para una imagen default en caso de no encontrar nada
$imageurl = "http://www.myblog.com/defaulthumb.jpg";
}
return $imageurl;
}
La última parte del código la hice para que en caso de que el script no encuentre ninguna imagen y ningún video de Youtube, en lugar de devolver algo vacío se tenga la URL de un Thumb por defecto, el cual debes crear con la dimensiones de los thumbs que publiques, y aprovechas de usar el logo de tu blog, tu avatar, o la foto de tu gato.
Datos adicionales
El API de IMGUR
Imgur usa el siguiente código para generar diferentes tamaños de una misma imagen:
- Original: http://i.imgur.com/ha220.jpg (ID de 5 caracteres = ha220) (en el 2013 actualizaron los IDs de nuevas fotos a 7 caracteres)
- Huge: http://i.imgur.com/ha220h.jpg (ID+h.jpg = ha220h) 1024px (width ó height)
- Large: http://i.imgur.com/ha220l.jpg (ID+l.jpg = ha220l) 640px
- Medium: http://i.imgur.com/ha220m.jpg (ID+m.jpg = ha220m) 320px
- Small: http://i.imgur.com/ha220t.jpg (ID+t.jpg = ha220t) 160px
- Big Square: http://i.imgur.com/ha220b.jpg (ID+b.jpg = ha220b) 160×160 px
- Original: http://i.imgur.com/ha220s.jpg (ID+s.jpg = ha220s) 90×90 px
El API de Youtube
Puedes tener 4 diferentes thumbs de un solo video de YouTube una vez que conoces su ID, con el siguiente código de Youtube API: Developers Guide Protocol:
- http://img.youtube.com/vi/xdhLQCYQ-nQ/2.jpg (height=”97″ width=”130″)
- http://img.youtube.com/vi/xdhLQCYQ-nQ/1.jpg (97×130)
- http://img.youtube.com/vi/xdhLQCYQ-nQ/3.jpg (97×130)
- http://img.youtube.com/vi/xdhLQCYQ-nQ/0.jpg (240×320, o más grande, es el tamaño del video original)
Y navegando por YouTube encontré 3 tamaños adicionales:
- http://img.youtube.com/vi/l5gMEq7ygXY/sddefault.jpg (640×480)
- http://img.youtube.com/vi/nKhheto4L6k/hqdefault.jpg (480×360)
- http://img.youtube.com/vi/PpBEji0SCfc/default.jpg (120×90)
Nuevo formato (2013): MQDefault
mqdefault: son thumbs 320×280
http://i.ytimg.com/vi/xdhLQCYQ-nQ/mqdefault.jpg
maxresdefault: Son para videos 720p para arriba con thumbs grandes con la máxima resolución disponible.
http://img.youtube.com/vi/b_kdke345NQ/maxresdefault.jpg
El orden de pequeño a grande sería:
default
mqdefault
hqdefault
sddefault
maxresdefault
Qué más se puede hacer
Empecemos por lo que no pude, No pude sacar los thumbs de la imágenes de flickr, ellos usan funciones con respuestas XML y necesitas subir archivos php a tu server para usar su API y generar los links.
Pero si te animas a realizarlo, te dejo con estos útiles enlaces: api/flickr.photos.getSizes and api/explore/flickr.photos.getSizes (si lo consigues deja un comentario con tu código o con un link a tu post con el código mejorado).
Este código como ya es una mejora de uno anterior, igualmente puede seguir siendo mejorado y expandido a otros servicios, sólo necesitas identificar la URL respectiva, extraer el ID único (contar cuantos caracteres alfanuméricos lo componen) y generar el nuevo enlace al thumbnail (si el servicio es capaz de crear uno, como YouTube).
Espero que lo disfruten y les sea de utilidad. Y si usan este código en sus blogs, se agradece un enlace en su Blogroll o un post de agradecimiento enlazando a este post.