YouTube Thumbnails in WordPress Posts with Shortcode

• Tweet

This post will show you how to render YouTube thumbnails on a page or post with WordPress shortcode (we’ve previously looked at how to render a YouTube video in your post with shortcode – check it out here). I’ll also provide some additional code for those that use TimThumb.php.

When a video is processed by YouTube, they create a large scale image (480×360) and three smaller thumbnail images (120×90) that are associated with the specified video. Our shortcode function will retrieve a defined image associated with an uploaded video and render it on our page (formatted to our choosing) with an optional link to the video.

As an example, the shortcode of [youtubethumbs id=”RlO1Z6wBl7o” img=”1″ align=”right”] will link to the first thumbnail created (other thumbnail options are 2 and 3). The “id” is the video id which can be sourced by looking at the URL bar of your browser. Each time the shortcode is used the page will use the thumbnail that resides on the YouTube server. The image that displays when using the shortcode above is rendered to the right hand side of this text.

Video ID sourced from YouTube URL

To source the second or third YouTube thumbnail, you would use the shortcode of either [youtubethumb id=”RlO1Z6wBl7o” img=”2″] or [youtubethumb id=”RlO1Z6wBl7o” img=”3″]. In the case above, I also added align="right" so the image would align to the right hand side of my text.

To render the full width preview image, you should use the shortcode of [youtubethumb id=”RlO1Z6wBl7o” img=”0″ align=”center”]. Note that I’ve referenced img="0" and also aligned the image to the center of the post. In my case, the full size preview image is larger than the container I have available to me to display images in. Generally speaking, any image larger than about 445 pixels on my blog will not fit. For that purpose, it’s more beneficial for me to use timthumb to dynamically scale the image. Another advantage of timthumb is that it’ll cache the image locally for faster (and, arguably, more reliable) retrieval.

Using another shortcode function that references timthumb, I can easily insert my image (and link to the video) using the shortcode of [youtubethumbs id=”RlO1Z6wBl7o” width=”430″]. The resulting image is shown below (nicely scaled within available space in the post column).

Here are the three available thumbnails side by side. In the case of my video, it was a static shoot so each image essentially looks the same.

Standard YouTube Video Shortcode

function youtubethumbnail($atts) {
   extract(shortcode_atts(array(
	'id' => '',
	'img' => '0',
	'alt' => 'YouTube Thumb',
	'link' => 'y', // or no/blank
	'align'=>''), $atts)); // default?
	$align_class='align'.$align;
	if ($link =="y") { $return .= '<a href="http://www.youtube.com/watch?v='.$id.'" target="_blank">'; }
	$return .= '<img src="http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg" alt="" class="'.$align_class.'" />';
	if ($link =="y") { $return .= '</a>'; }

	return $return;
}
add_shortcode('youtubethumb', 'youtubethumbnail');

Available Shortcode Parameters

id – YouTube Video ID
img – 0, 1, 2 or 3 (0 is full size)
alt – Alt image text
link – y or n. Link to the video?
align – left, center or right

YouTube Video Shortcode using TimThumb

If you’re using timthumb.php, you’re already enjoying a great deal of flexibility when it comes to retrieving, manipulating and caching images. This code integrates timthumb with the retrieval of YouTube images. It’s provided separately to avoid conflict issues.

function youtubethumbnails($atts) {
   extract(shortcode_atts(array(
	'id' => '',
	'img' => '0',
	'alt' => 'YouTube Thumb',
	'link' => 'y', // or no/blank
	'width' => '',
	'hspace' => '5',
	'vspace' => '5',
	'title' => 'YouTube thumb',
	// Timthumb Specific Attributes
	'crop' => '',
	'filter' => '',
	'sharpen' => '',
	'zoom' => '',
	'quality' => '70',
	'align'=>''), $atts));

	$align_class='align'.$align;
	
	   // Path to the timthumb.php directory // EDIT ME!!!
           $path = "http://www.YourWebsite.com/timthumb";

	   if (($id == "0") && ($width == "")) { $width="425"; }
	   if (($id != "0") && ($width == "")) { $width="120"; }

                if($width)   $myimage .= '&w='  . $width;
                if($crop)    $myimage .= '&a='  . $crop;
                if($filter)  $myimage .= '&f='  . $filter;
                if($sharpen) $myimage .= '&s='  . $sharpen;
                if($zoom)    $myimage .= '&zc=' . $zoom;
                if($quality) $myimage .= '&q='  . $quality;
		
	if ($link =="y") { $return .= '<a href="http://www.youtube.com/watch?v='.$id.'" target="_blank">'; }
	$return .= '<img src="'.$path.'/timthumb.php?src=http://img.youtube.com/vi/'.$id.'/'.$img.'.jpg&'.$myimage.'" alt="'.$alt.'" title="'.$title.'" hspace="'.$hspace.'" vspace="'.$vspace.'" class="'.$align_class.'">';
	if ($link =="y") { $return .= '</a>'; }

	return $return;
}
add_shortcode('youtubethumbs', 'youtubethumbnails');

Available Shortcode Parameters

id – YouTube Video ID
img – 0, 1, 2 or 3 (0 is full size)
alt – Alt image text
width – Width of the image
link – y or n. Link to the video?
hspace & vspace – Horizontal and vertical image spacing.
title – image title
align – left, center or right

And, of course, all the standard TimThumb formatting options apply. Here’s a few examples of styled images that were dynamically created (the same thumbnails as those above). You should review this post for all styling options.

Example timthumb filters usage is as follows:

Rather than copying the code from above, you should download the zip file below. Add the code to your theme’s functions.php file. If you require any assistance, please let me know.

First Name: Your Email Address:

If you liked this article, you may also like:

1. Add Thumbnail Image (Links) from a YouTube RSS Feed to WordPress with Shortcode
2. Get YouTube Views with PHP or WordPress Shortcode
3. [Shortcode] Insert Youtube videos into your blog with shortcode
4. Insert YouTube Subscriber Count or Video Views in WordPress with Shortcode
5. Timthumb Image ShortCode