Use WordPress Plugins WP YouTube & Youtube Thumbnailer Together

Last Updated: By

I came across an issue the other day and resolved it with the help of my friend Adrian Pavone. I couldn’t find an answer anywhere, so I figured I’d give it here for the next person who wants to do it.

There’s two cool wordpress plugins, WP YouTube and Youtube Thumbnailer that I wanted to use at the same time.

WP YouTube Plugin

WP YouTube allows you to use a shortcode with youtube’s unique video code (ie http://www.youtube.com/watch?v=uelHwf8o7_U) to easily embed youtube videos into posts. It looks like

[video_shortcode]uelHwf8o7_U[/video_shortcode]

rather than the massive embed code youtube gives you. It’s especially good if you want to use a non-default style consistently across all your videos and don’t want to mess with the embed settings every time. Also very handy if you’re using non-techy people to post videos (like I was on the particular site I was designing).

Youtube Thumbnailer Plugin

Youtube Thumbnailer makes use of the Featured Image capability of WordPress 2.9+. It automatically sets the featured image to be the default picture from youtube. Pretty handy for magazine style layouts. Ordinarily, it looks for the embed code, takes youtube’s unique video code from that and sets the featured image from there.

Problem

The problem is that the two plugins are incompatible. WP YouTube allows you to use shortcode, so does away with the embed codes, but Youtube Thumbnailer needs those embed codes to work!

Solution

If you’re not technically minded and you’re still reading (good effort btw :)) you should probably forward this to your techy person because this is fairly advanced and it could be difficult to recover from a mistake.

* Note: This will only work if you use one shortcode in WP YouTube for the videos for which you want Featured Images, though I’m sure you can customize from here. For this example, I’ve used [video_shortcode] as the WP YouTube custom video shortcode, so just replace that with whatever you want. In your wordpress admin area, go to Edit Plugins and select Youtube Thumbnailer. You want to be editing youtube-thumbnailer/youtube_thumbnails_script.php

On line 97, replace

‘%http://www.youtube.com/v/%'”;

with

‘%[video_shortcode]%'”;

Then on lines 107 and 149, replace

if (preg_match(‘#http://www\.youtube\.com/v/([^&”\’? ]*)#’,$p->post_content,$match) ) {

with

if (preg_match(‘#video_shortcode\]([-A-Za-z0-9_]+?)\[#’,$p->post_content,$match) ) {

That RegEx of ([-A-Za-z0-9_]+?) gave me a bit of grief – I was approaching it the wrong way – but Adrian was there to help out with that. The first find/replace is where the plugin looks for the posts which have video embed codes in them. The second replace strips out the video_shortcode tags so it can put the unique video code into the url on the line below.

Genesis Theme Note

I used this on Executive: a Genesis theme from StudioPress. To make it actually display the Featured Image, you need to add this code to your functions.php file in Executive:

// Return an image from a custom field if no post thumbnail or image attachement exists
add_filter(‘genesis_get_image’, ‘custom_field_image_fallback’, 20, 1);
function custom_field_image_fallback($output) {
if ( empty($output) && genesis_get_custom_field(‘thumbnail’) )
return ‘<img width=”120″ height=”90″ src=”‘ . genesis_get_custom_field(‘thumbnail’) . ‘”/>’;
return $output;
}

Running Youtube Thumbnailer with the default settings sets the picture to the custom field “thumbnail“. This code for Executive looks to see if there is a Featured Image set for that post, and if not, it uses the image set in the custom field “thumbnail“. If for whatever reason you don’t like the picture on for a particular video, just use the Featured Image section on the right hand side of your edit posts page and it will (should) override the one set by Youtube Thumbnailer.

Design Note

Youtube Thumbnailer sets the image at http://i2.ytimg.com/vi/video_shortcode/default.jpg to be the Featured Image. This image is 120 x 90 pixels. The way the plugins are setup and modified here, it doesn’t alter that size. You’ll notice on the Genesis Theme code, it says width=”120″ height “90”. Changing these values stretches/squashes the image, rather than cropping it.

Well I hope you found this useful. If so, I’d love to hear how you went.

Filed Under: Wordpress
Originally Posted:

Comments

  2. Hey there

    I’m looking to reproduce the process you described (using the custom field path to return it as a featured image) but I’m not using the same theme than you ( it’s my own) and so far I don’t have those function in there and can’t have access to it :
    genesis_get_image
    custom_field_image_fallback

    any chance you can share the function code for those so I can implement them in my function.php as well ?

    thanks

    Reply

  3. Seb

    This should help:

    // pulls an image URL from the media gallery
    function genesis_get_image($args = array()) {
    global $post;

    $defaults = array(
    ‘format’ => ‘html’,
    ‘size’ => ‘full’,
    ‘num’ => 0,
    ‘attr’ => ”
    );
    $defaults = apply_filters(‘genesis_get_image_default_args’, $defaults);

    $args = wp_parse_args($args, $defaults);

    // check for post image (native WP)
    if ( has_post_thumbnail() && ($args[‘num’] === 0) ) {
    $id = get_post_thumbnail_id();
    $html = wp_get_attachment_image($id, $args[‘size’], false, $args[‘attr’]);
    list($url) = wp_get_attachment_image_src($id, $args[‘size’], false, $args[‘attr’]);
    }
    // else pull the first image attachment
    else {
    $id = genesis_get_image_id($args[‘num’]);
    $html = wp_get_attachment_image($id, $args[‘size’], false, $args[‘attr’]);
    list($url) = wp_get_attachment_image_src($id, $args[‘size’], false, $args[‘attr’]);
    }

    // source path, relative to the root
    $src = str_replace(get_bloginfo(‘url’), ”, $url);

    // determine output
    if ( strtolower($args[‘format’]) == ‘html’ )
    $output = $html;
    elseif ( strtolower($args[‘format’]) == ‘url’ )
    $output = $url;
    else
    $output = $src;

    // return FALSE if $url is blank
    if ( empty($url) ) $output = FALSE;

    // return FALSE if $src is invalid (file doesn’t exist)
    //if ( !file_exists(ABSPATH . $src) ) $output = FALSE;

    // return data, filtered
    return apply_filters(‘genesis_get_image’, $output, $args, $id, $html, $url, $src);
    }

    // function genesis_get_custom_field

    function genesis_get_custom_field($field) {
    global $post;

    if ( null === $post ) return FALSE;

    $custom_field = get_post_meta($post->ID, $field, true);

    if ( $custom_field ) {
    // sanitize and return the value of the custom field
    return wp_kses_stripslashes( wp_kses_decode_entities( $custom_field ) );
    }
    else {
    // return FALSE if custom field is empty
    return FALSE;
    }
    }

    The code is part of the GPL license of Showcase Themes, a division of Copyblogger Media LLC. I hope I’ve understood the license conditions.

    I couldn’t find a definition for genesis_get_image_default_args, so play around with it and see if it works. Hope that helps.

    Reply

  4. This sounds really great.. :) i am actually running a video blog where i am using youtube thumbnailer plugin. I was bit afraid about changing the theme as i thought it may break the entire site.. now i will give a try and see.. will message here if anything messes up.
    Cheers.
    _Robin

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *