So one of the things I put into my new theme Tender Spring is the post thumbnail support. The theme handles the image that you set as post Featured Image on the post in a special way. It puts a circle around it and adds a leave. I’m sure it’s not a new concept but heck I thought of it while designing the theme so I want to share my new revelation!

the_post_thumbnail() doesn’t really give the flexibility I need because I don’t want the img tag but rather just the url for the post thumbnail file.

So here’s my template code:

/**
 * Custom post thumbnail (featured image)
 */
function tenderSpring_post_image_html( $html, $post_id, $post_image_id ) {

	$html = '<div class="tenderSpring-post-thumbnail" style="background: url(' . wp_get_attachment_url( get_post_thumbnail_id($post_id) ) . ') no-repeat center center;background-size: 200px"><div class="tenderSpring-post-thumbnail-inner">' . $html . '</div></div>';

	return $html;
}
add_filter( 'post_thumbnail_html', 'tenderSpring_post_image_html', 10, 3);

I wrapped two layers over the img.

My css looks like:

.tenderSpring-post-thumbnail {
	width: 100px;
	height: 100px;
	border-radius: 50px;
	float: left;
	margin: 20px 20px 0 0;
}
.tenderSpring-post-thumbnail-inner {
	background: url("images/postThumbnail.png") no-repeat right top;
	width: 100px;
	height: 100px;

}
img.wp-post-image {
	display: none;
}

I made the img not display but used the background image from the first layer with border-radius to get the circle affect. The inner layer is used to overlay a background image on top of the outer layer.

This image is the leaf you see.

This technique depends on the CSS3 background-size & border-radius which should now be supported by your latest versions of FF, Chrome and even IE believe it or not.