Darren Mothersele

Software Developer

Warning: You are viewing old, legacy content. Kept for posterity. Information is out of date. Code samples probably don't work. My opinions have probably changed. Browse at your own risk.

Adding Thumbnails to Drupal Vimeo Support

Apr 13, 2008


The embedded media field is a project for Drupal that adds support to embed third party media into content types. Several video providers are already supported, and Drupal user robomalo started adding Vimeo support.

This works for embedding videos, but it did not support fetching thumbnails - until now! I've attached my changes to the Vimeo code that now supports thumbnails.

Embedding video takes a couple of steps. The first is to extract the Vimeo ID number from the URL, then use this to generate the embed code. The Vimeo include file already does this, and provides some options for configuring the embed code.

Supporting thumbnails takes a little bit more effort, as it involves using the Vimeo API to request the video thumbnail API.

The embedded video field uses include files to add support for different video hosts. These include files contain the implementation for various "hooks" that are called to perform various tasks. The hook for adding thumbnail support is called video_cck_PROVIDER_thumbnail - so in this case the function to implement is video_cck_vimeo_thumbnail. This function should return the URL to the thumbnail image.

In order to fetch the thumbnail location, we need to make a call to getThumbnailUrl method of the Vimeo API. In order to make an API call we need to give our API key as provided by Vimeo, and we need to "sign" our request using our Shared Secret with Vimeo. I've added these to options to the video embed settings page, by adding the following code to the end of the video_cck_vimeo_settings hook implementation:

$form['vimeo']['video_cck_vimeo_api_key'] = array(
'#type' => 'textfield',
'#title' => t('Vimeo API Key'),
'#default_value' => variable_get('video_cck_vimeo_api_key', ''),
$form['vimeo']['video_cck_vimeo_api_secret'] = array(
'#type' => 'textfield',
'#title' => t('Vimeo API Shared Secret'),
'#default_value' => variable_get('video_cck_vimeo_api_secret', ''),
$form['vimeo']['video_cck_vimeo_thumb_size'] = array(
'#type' => 'select',
'#title' => t('Vimeo Thumbnail Size'),
'#options' => array('96' => '96', '100' => '100', '160' => '160', '200' => '200', '460' => '460'),
'#default_value' => variable_get('video_cck_vimeo_thumb_size', '160'),

Notice there's also an option to select the size of thumbnail requested from Vimeo.

Now using those three options we can formulate our request to the Vimeo API and generate our signature using an MD5 hash:

function video_cck_vimeo_thumbnail($field, $item, $formatter, $node, $width, $height) {
$vimeo_id = (substr($item['value'],-1,1)=='/') ? substr($item['value'],0,-1) : $item['value'];
$vimeo_signature = variable_get('video_cck_vimeo_api_secret', '') .
'api_key' . variable_get('video_cck_vimeo_api_key', '') .
'method' . 'vimeo.videos.getThumbnailUrl' .
'size' . variable_get('video_cck_vimeo_thumb_size', '160') .
'video_id' . $vimeo_id;
$vimeo_apicall = 'http://www.vimeo.com/api/rest?' .
'api_key=' . variable_get('video_cck_vimeo_api_key', '') .
'&method=' . 'vimeo.videos.getThumbnailUrl' .
'&size=' . variable_get('video_cck_vimeo_thumb_size', '160') .
'&video_id=' . $vimeo_id .
'&api_sig=' . md5($vimeo_signature);
$api_file = file_get_contents($vimeo_apicall);
$xml = new SimpleXMLElement($api_file);
return $xml->thumbnail;

Notice that I am using SimpleXML to parse the thumbnail location from the result of the Vimeo API call. This means this code requires PHP5. There may be a better way to do this, but as I always run on PHP5 this isn't a problem.

Usage: download the attached file, you need to place it in the "providers" subdirectory in your emfield folder.