I absolutely love the Thesis Theme framework for WordPress. Sure there’s lots of really good frameworks out there now but Thesis, in my opinion, is one of the best. However, there’s one drawback and that’s being able to dynamically add a thumbnail to a teaser post. Most themes, as well as, frameworks insist on having you add a link to a thumbnail in one of the post meta fields. This is fine, it’s also foolproof , for the most part but it’s also a step that’s annoying as all heck to me.
If you search the web there’s lots of creative solutions out there, but none really did what I wanted. Below is a sample of how I wanted to layout the main page on my site Reality Wired.
Most of the time posts have an image and with the new the_post_thumbnail function in WordPress 3.x it’s fairly easy to get this. But what if your post doesn’t contain an image? Maybe it contains a Youtube video or a Flickr image what then? Well I came up with what I think is a fairly creative solution. Here’s the code.
/* Thumbs for teasers */
function thesis_teaser_wp_thumb() {
global $post, $posts;
unset ($attachments);
unset ($video_id);
$default_thumb = '<img width="100" height="100" src="'.THESIS_CUSTOM_FOLDER.'/images/noimage.gif">';
$args = array( 'post_type' => 'attachment', 'numberposts' => 1, 'post_status' => null, 'post_parent' => $post->ID );
$attachments = get_posts($args);
// Check for a you tube video in the post and grab the video id
preg_match('#http://[a-z]*?[\.]?youtube\.[a-z]*?/v/([\w-]*)#i', $post->post_content, $matches);
if (!empty($matches[1])) { $video_id = $matches[1]; }
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
elseif (!has_post_thumbnail() && isset($video_id)) {
if(@fopen("http://img.youtube.com/vi/$video_id/default.jpg",true)) {
echo '<img width="100" height="100" src="http://img.youtube.com/vi/'.$video_id.'/default.jpg">';
} else {
echo $default_thumb;
}
}
elseif (!has_post_thumbnail() && !empty($attachments)) {
foreach ( $attachments as $attachment ) { the_attachment_link( $attachment->ID , false ); }
}
else {
echo $default_thumb;
}
}
To use this function in Thesis you need to first add it to your custom_functions.php file inside your thesis_18/custom directory. Next you call this function via a hook. In the case of my blog I used the thesis_hook_before_teaser_headline hook location. Add this next line somewhere in the same custom_functions.php file. (I like to keep all my hooks at the top of the file but it can really go anywhere. Some prefer to place near the function itself, it doesn’t matter.)
add_action('thesis_hook_before_teaser_headline', 'thesis_teaser_wp_thumb', '1');
Essentially we are telling WordPress that the hook should execute right before the teaser headline is processed and the third parameter, a 1 in this case, also tells WordPress to execute this function before any other hooks in this location.
Finally I’m adding a bit of css to my custom.css file (also located in the thesis_18/custom folder).
.custom .teaser {
border-top:2px dotted #BBBBBB;
margin-top:2em;
padding-top:2em;
text-align:justify;
width:100%;
}
.custom .teasers_box {
border-top:0 none;
padding-bottom:0;
padding-top:0;
}
.teaser img {float:left; padding-right:10px;}
a.teaser_link {float:right;clear:both;}
.format_teaser p {display:table;}
.teaser .format_teaser { margin-top:.5em; margin-bottom:.5em; }
.teaser .teaser_comments { float:right;}
Once you have this code in place it should alter your Thesis teasers to look like the sample I posted above. If you don’t like the layout just skip the css styling or customize your own. The guts you care about is the thesis_teaser_wp_thumb function. As is, the function should handle embedded Youtube videos (assuming you’re using regular embed code). So what if you want to use a different service? Well, I typically just use Youtube and it’s rather easy to get the thumbnail that Youtube generates when it encodes a video. That said, you should be able to modify this code to work with your chosen service.
// Check for a you tube video in the post and grab the video id
preg_match('#http://[a-z]*?[\.]?youtube\.[a-z]*?/v/([\w-]*)#i', $post->post_content, $matches);
if (!empty($matches[1])) { $video_id = $matches[1]; }
We use a preg_match to strip out the Youtube video id which we then insert into the code snippet below to call the thumbnail.
if(@fopen("http://img.youtube.com/vi/$video_id/default.jpg",true)) {
echo '<img src="http://img.youtube.com/vi/'.$video_id.'/default.jpg" alt="" width="100" height="100" />';
} else {
echo $default_thumb;
}
Here I check to see if the thumbnail I’m after exists and if it does I build the image code. If it doesn’t then my default thumbnail gets displayed.
I use the same process to grab thumbnails from Flickr and that code could be modified to fit other sources. At some point I turn this into a plugin but for now I thought I would share what I have. Feel free to use it, critique it or whatever.
