WordPress: How to create thumbnails in your index from YouTube videos and images hosted outside (Imgur)

Date: September / 08 / 2011 + Comments: 10

There are a lot of WordPress plugins that generates Thumbs from your post images, so your home or index shows a small image for each post, but the majority requires that each image mus be hosted within your WordPress blog and server.

Since I have a Pro account with imgur (a cool image hosting service) and I do like to post images from its service (So I have more bandwidth and don’t suffer from hotlinking), and besides images I also like to post videos from youtube, for these reasons I couldn’t find a function or plugin to generate thumbs for my index page.

Note: If you host your images for your blog, just use the function the_post_thumbnail(); available since WordPress 2.9

How to extract the thumbnail image from a post

Here is a quick function to extract the thumbnail image from any post. This is quite useful especially on older themes or if you are not using post thumbnail functionality of newer WordPress versions, or if like me, you host your post images in an external server or in a image hosting service.

The Following code is an improvement of Vladimir’s Code, he did the main work setting everything for detecting the thumbs from the youtube videos, but when an external image was found, his code directly publishes the same image with a custom reduced width, like a big image of 600px by 500px will be adjusted to width=”120″, but without creating a small thumb, it is just an illusion, there is no gain in the page load. The new code identifies if there is an imgur image located in the post, extracts its ID and generates a BIG SQUARE thumbnail, a real thumb :)

The result looks like this:

Blog with Thumbs from Imgur and Youtube

The Loop

To create thumbs for every post, you need to add the following code in your Main Index Template (index.php), within the loop (below <?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 style="margin-top:13px; width:160px;" src="'.$thumb.'" alt="'. get_the_title().'" class="left" />'; ?></a>

You have to edit the width value for the one that you desire to use for each thumb.

The code links each thumb to the original post, and creates alt tags for each image with the title of the post, so it is very SEO friendly :)

Functions

Put the following code in your Theme Functions (functions.php):


function vp_get_thumb_url($text)
{
  global $post;
  $imageurl="";        
 
  // extract the thumbnail from attached imaged
  $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];
 
 
  // try to get any image

   if (!$imageurl)
  {
    preg_match("/([a-zA-Z0-9\-\_]+\.|)\i.imgur\.com\/([a-zA-Z0-9\-\_]{5})([^<\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];
  }
 
  // try to get youtube video thumbnail
  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)
  {
  // change the URL to your default thumb image
     $imageurl = "http://www.myblog.com/defaulthumb.jpg";
  }

return $imageurl;
}

The last part of the code says that if there isn’t any image and any youtube video in the post, a custom thumb will be used. You should change that to your personal image, blog logo, or your cat photo.

IMGUR API

Imgur uses the following code to generate different image sizes:

Medium thumbnail small thumbnail big square thumbnail small square thumbnail

Youtube API

You can have 4 different thumbs from each youtube video using the following code from its 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, or bigger, it is the default video size)

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

I have also found three more options for youtube thumb images:

  • 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

What else

I couldn’t do the same for images hosted in flickr, :fuuu: they use a lot of XMLs functions and variables to generate the links.
But if you are willing to take a chance, just look this: api/flickr.photos.getSizes and api/explore/flickr.photos.getSizes

This code can be improved and expanded to other services, you just need to identify the URL of the service you are using (videos or images), extract the unique ID (counting the alphanumeric symbols), and regenerate a new link to create the thumbnail (if the service provides it, like youtube).

Follow us in Twitter @aeromentaln and Facebook

Post author: Daniel Semper

Similar Posts

Previous and Next Post

Email Newsletter

The best of Aeromental in your inbox every morning !!!

10 Comments »

  1. Mohammad Tahir Taous says:

    Hi dear.
    i have tried your code, its working and creating thumbs for each post on index page, but i am having a problem. Text in post is displaying at the bottom of the thumb and thumb is at top.
    but i want to display text as post are displaying on your home page.
    Here is image link to view how post are displaying on my index page.

    http://buddypresstest.funjog.com/wp-content/uploads/post-thumbnail.jpg

    Hope you will help me.

  2. DanielSemper says:

    Create CSS divs with float:left;

  3. Jimmy says:

    hello, thanks for the great tutorial. It works for each of my posts which have an image or images in it without me having to create a featured post / custom field for the thumbnail, because it can get the image automatically.

    one question, about the youtube image, I can’t get it to display the video thumbnail. Does your code work with the iframe version of youtube embed?

    thanks

  4. DanielSemper says:

    Jimmy:

    This code searches for a YouTube URL like:

    youtube.com/watch?v=cDoRmT0iRic

    Look the line that says:

    preg_match("/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/watch(\?v\=|\/v\/)([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $text, $matches2);

    But in the iframe code, the Youtube URL looks like this:

    src=”http://www.youtube.com/embed/cDoRmT0iRic”

    So you just have to replace the previous code with this one:

    preg_match("/([a-zA-Z0-9\-\_]+\.|)youtube\.com\/embed\/([a-zA-Z0-9\-\_]{11})([^<\s]*)/", $text, $matches2);

    I hope it works :)

  5. albi107 says:

    Hello I have all the iframe embed code ending with:

    ?rel=0&amp;wmode=transparent (because of menu dropdown)

    And i get the youtube thumbnail not working…
    Any way to fix this?

  6. albi107 says:

    preg_match('~(?:youtube\.com/(?:user/.+/|(?:v|e(?:mbed)?)/|.*[?&amp;]v=)|youtu\.be/)([^"&amp;?/ ]{11})~i', $text, $matches2);

    this fixed the rel=0 and wmode transparent but still the id is not grabed from the post content iframe code
    I get only http://i.ytimg.com/vi//0.jpg

  7. DanielSemper says:

    It doesn’t matter if the youtube URL is ending with ?rel=0&amp;wmode=transparent

    The part that says {11} only considers the eleven letters from the video ID, so you just have to detect each previous word/code from its left side, the letters to the ID’s right side are automatically discarded.

  8. Jimmy says:

    thank you very much Daniel, it works now! :D

  9. cole says:

    I am having the same problem as albi107, no matter what i try, i cant seem to get the video id to embed, everything else works great except that. I continuously receive “http://i.ytimg.com/vi//0.jpg” any ideas?

    Thanks
    Cole

  10. DanielSemper says:

    Cole: Insert in your posts the URLS of youtube like this:

    http://www.youtube.com/watch?v=qPFQKXytOjo

    The code searches for the word watch?v= and then it extracts the 11 letters of the video ID.

    If you use wordpress, you can activate the option to automatically embed the videos using only the URLs in the post. Go to: Settings – Media – Embeds – Auto Embeds.

Leave a comment

*It won't be visible