docwhat's avatardocwhat's blog

Thematic featured images

I was wondering what the “Featured Images” box was when creating new posts and discovered that it’s a handy way to add images to a post. It auto resizes, crops (if you want), and can make it just “work” in your layout. The only drawback I’ve seen is I can’t use urls for the image.

Unfortunately, the Thematic theme doesn’t have out-of-the-box support for it.

Fortunately, Thematic is very customizable so this is pretty easy.

The gist of what I’m doing is turning on this feature in Wordpress, telling it the default size, and then adding the image to beginning of my post.  I added some left-right alternating alignment based on the number of the post.  Not perfect if you create lots of drafts, but better than just having the images always on the same side.

Here’s what you need to add to your Thematic child theme’s function.php:

// Add Thumbnail Support for Theme (introduced in 2.9)
if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
  set_post_thumbnail_size(250, 250);
}

// Add post thumbnail to post excerpt
function my_add_post_thumb($content) {
  if (has_post_thumbnail()) {
    global $id;
    //$id = get_post_thumbnail_id();
    $align = $id % 2 == 0 ? 'left' : 'right';
    return get_the_post_thumbnail(NULL, array(250,250), array('class' => ' wp-post-image-' . $align)) . $content;
  } else {
    return $content;
  }
}
// Add it to the excerpt on the home page.
add_filter('get_the_excerpt', 'my_add_post_thumb');
// Add it to the content for a single post.
add_filter('the_content',     'my_add_post_thumb');

And here’s the styling you need to add for the left/right images:

body .wp-post-image,
body .wp-post-image-left {
    float: left;
    margin: 5px 20px 20px 0;
}
body img.wp-post-image-right {
    float: right;
    margin: 5px 0 20px 20px;
}

Ciao!

Update

It looks like Thematic now has support for featured images, but I like mine better. Ideally I would integrate with their support some how, but I’m too lazy at the moment.

Add this to your function.php:

// Turn off Thematic's thumb support:
function childtheme_post_thumbs($bool) {
  return FALSE;
}
add_filter('thematic_post_thumbs', 'childtheme_post_thumbs');

And change the CSS to look like this to override the .entry-content .wp-post-image rules:

/*** wp-post-image ***/
body .entry-content .wp-post-image,
body .entry-content .wp-post-image-left {
    float: left;
    margin: 5px 20px 20px 0;
    border: none;
    padding: 0;
}
html body .entry-content .wp-post-image-right {
    float: right;
    margin: 5px 0 20px 20px;
}

Comments

Gravatar for webstyley
WebStyley

Thanks for this code! Just what we needed - worked great! Keep up the great work.

Gravatar for meher ranjan
Meher Ranjan

Nice post. I am using it and any idea how i can have my featured image with a defined dimension like 690 X 500 or something..

thanks.

Gravatar for p.boy
P.Boy

Agree with previous poster.

Exactly what I needed and far more specific for my site than anything else I’ve found. I don’t suppose there’s a follow up on making those thumbs clickable in the offing?

who me?

Gravatar for bradley
Bradley

Hi, thanks for the code. I notice that on category archives, there are now two thumbnails. It appears that, out-of-the-box, Thematic supports the featured image thumbnail on the category archive. You can see what I mean on your category pages (http://docwhat.org/topic/code/). If the code you give is used, then the other thumbnail should be turned off. Does anyone know how that can be done?

Gravatar for docwhat
docwhat

Yeah, it looks like Thematic now has support. Unfortunately, as you noticed, it conflicts with my thumbs…

I’ve updated my post above to reflect the changes…

Gravatar for bradley allen
Bradley Allen

Thanks so much for the update. Looking real good.

Gravatar for tom fox
Tom Fox

Can anyone figure out a way to use a featured image as a background stretchy image?

Submit a Comment

docwhat

The personal blog of Christian Höltje.
docwhat docwhat contact