WordPress: Como generar thumbs en tu index con imágenes de Youtube, y hospedadas en Imgur

@ 08 . septiembre . 2011

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í:

Blog con Thumbs de Imgur y Youtube

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:

Medium thumbnail small thumbnail big square thumbnail small square thumbnail

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)

youtube thumb image size 2 youtube thumb image size 1 youtube thumb image size 3 youtube thumb image size 0

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)

youtube thumb image hqdefault youtube thumb image default

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, :fuuu: 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. :sol:

DanielSemperAutor: Daniel Semper, fanático de la tecnología y sus usos sociales, cinéfilo geek, al menos veo una película por semana, innovador en Front-End y activo lector de comics. En mis tiempos libres soy ingeniero y estudio una maestría en Sidney en la universidad de UTS. Me puedes contactar en: twitter, Google Plus.
e-mail: hola @ danielsemper.com

Noticias Similares

  • Fernando Landeros

    YO solia usar Auto Post Thumbnail, lo malo es que las hospeda en tu mismo servidor.

  • Paclanc

    Que buena función, gracias por publicarlo. Ahora veré si lo puedo implementar en un blog que voy a hacer.

  • Nestor C. Pool

    Gracias Daniel por compartir esta excelente informacion… Hace un tiempo ya que venia con la idea pero tenia el dilema del problema de alojar las imagenes pero hiciste algo que esta super MEGA completo facil para las personas que no tenemos muchas experiencia.

    Probare aver que tal podria implementarlo en mi blog…

  • El Dog

    justo estaba buscando al respecto… aunque yo ya me aburrí de los thumbs en mi blog los necesito para generar en otro lado, muchas gracias, espero me funcione!!

  • Alejandro

    Genial Daniel!!! XD (y)

  • snake

    hola a mi no me funciona, no se ve el 90% de imagenes de imgur y las que se ven salen mal, ademas alas de blogger tamapoco se ven y solo en el index si paso a la pag 2 no se ve nada =S, solo se ve una imagen de imageshack u_u ayuda por favor

  • OMR

    ¿de esta forma los thumbs se hospedan en tu mismo servidor? igual que hace el Auto Post Thumbnail? o se puede elegir uno externo…

  • http://www.aeromental.com/ DanielSemper

    OMR: De esta manera las imágenes se almacenan en otro servidor, el de imgur.com

  • OMR

    Gracias por responder Daniel, me viene bárbaro entonces.

    Te hago una consulta, yo estoy modificando un theme donde el loop aparece en 2 archivos separados “loop-excerpt.php y loop-full.php”, sería cuestión de ir probando pero ¿en cuál tendría que agregar este código?

    Un saludo.

  • Carlos Escobar

    Daniel, sigues usando Imgur, no te ha dado problemas la cuenta premium? Qué procedimiento realizaste al mudarte a este servidor? Digo, fue imagen por imagen que los resubiste? Es que me gustaría implementarlo en mi sitio, pero contiene una gran cantidad de imágenes.

    Saludos!

  • http://www.aeromental.com/ DanielSemper

    Carlos Escobar:

    Si, sigo usando Imgur (y) de hecho la próxima semana se cumple mi año de cuenta premium y obvio que la renovaré por otro año más. Es un gran servicio.

    Hay que subir manualmente las fotos una por una, así que lo que yo hice fue nomás empezar a usar IMGUR únicamente con los nuevos posts sin mudar los antiguos, sería una locura en mi caso (6000 posts con fotos en cada uno, algunos con 30 fotos) seguro tomaría 2 semanas sin dormir hacer una mudanza de ese calibre.

    Los antiguos posts se quedaron como estaban, sólo me di tiempo de mudar las imágenes de los posts antiguos más famosos y visitados.

  • OMR

    Hola de nuevo Daniel, al final no pude hacer funcionar los thums con imagenes de IMGUR.

    Te hago una consulta, ¿es tanto lo que se ahorra pagando una cuenta premium en IMGUR que alojando las imagenes en un servidor propio?

    Pregunto porque estoy con este dilema con mis webs, ya que parece que algunos sitios wn WordPress que tengo se relentiza mucho por esto de cargar las imagenes externas (imageshack y imgur).

    Un saludo.