brand:GNU

WordPress 2.9 came with lots of new interesting features, including an image re-sizer. The main goal of this tutorial is explaining how the post thumbnails work (and what to do for Digg and Facebook compatibility).

I used to manage post image and video thumbnails via Custom Fields, but this is completely useless right now: a set of new functions has been introduced to append media to a post as thumbnails.

By default they output XHTML-compliance anchors — and you can’t use them in the head element. I found a simple workaround to do so.

Unfortunately, you should use 2 different WordPress‘ functions and this means that you’ll risk twice to find the way I’m going to explain deprecated in the near future. But it works.

The code goes all in the head element – that probably resides in the header.php file of your theme – without the need to add custom functions.

It doesn’t work on feeds: I use to put the same image (in a different resolution) in the post’s excerpt to see it on the feed too. Let’s see the code itself.

<?php
if ( has_post_thumbnail ( $post-> ID ) ) {
?>
<link rel="img_src" href="
<?php
$thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $post->ID ), 'thumbnail' ) ;
echo $thumbnail[0];
?>
"/>
<?php
}
}
}
?>

You may want to include additional control parameters to ensure backward compatibility at your option. I suppose that you know what you’re doing, so I won’t show how to do so here.

Warning: I was forgetting that – if you didn’t yet for other needs – you must enable post thumbnail compatibility to your custom theme.

<?php
add_theme_support ( 'post-thumbnails' );
?>

This wasn’t enough for me, because I wanted additional resolutions: if you don’t want them too, you could stop here. But I think you shouldn’t — especially for SEO issues.

Of course, previous snippet goes on functions.php instead of the header.php file: for those who want to know, it gets an array and prints the first value (that’s the image URL) in a link anchor.

Which custom resolutions should be added? ↑

It mainly depends on your settings: going to Settings → Media you can choose the default Thumbnail size — I chose a resolution of 100×100 pixels, that’s the one included in the head with my script.

Additional basic size should have been set in Medium size and Large size (optionally callable for your posts). They don’t matter for our purpose, but they’re useful for other things: just remember to select Crop thumbnail to exact dimensions (normally thumbnails are proportional) for “security” reasons.

If you don’t need to output different sizes, you don’t need to add extra parameters to functions.php: in my case, I chose to show a smaller image on archive pages… so I added few extra rows to the code.

It’s not really important what you configure here, unless you didn’t set the default thumbnails size to 100×100 pixels — I’ll tell you why. My full function looks as follows:

<?php
add_theme_support ( 'post-thumbnails' );
set_post_thumbnail_size ( 100, 100, TRUE );
add_image_size ( 'single-post-thumbnail', 50, 50 );
?>

The 2nd line is optional if you correctly set the dashboard’s option: you could add as many set_post_thumbnail_size declarations as you need, being aware that they’re different from what you choose for medium and large sizes — or they’ll simply become useless.

And another thing (no, I’m not a Steve Jobs’ fan): according to the main reference I used to build my own solution for sizes, you have to change single-post-thumbnail with post-thumbnail to export custom dimensions on WordPress’ archives. I didn’t need this.

Squares vs. rectangles ↑

An important thing is the image geometry: even if it doesn’t really matter on your theme, it’s essential for thumbnails to show on social bookmarking and other networking platforms.

Although you can choose to crop images instead of simply resizing them, they won’t be so beautiful to look at. My solution is to create just square images, so you don’t need other snippets of code.

It’s still not enough: services like Facebook Share and Digg will output your thumbnails on a white background, so I prefer to use only PNGs without transparency (because Facebook doesn’t like it) for drawings and photos.

Just add a white layer below your pictures while building them for your blog, enlarging the canvas to get a square and you’re done. I’d like to thank Roman Wünsche who first shares the workaround that made this possible.