Keep Walking

If you are the Hybrid Wordpress theme user, you may found that the Hybrid theme can get the thumbnail form your blog without any setting. Not only the Hybrid but also all the child theme of Hybrid can do this. Sometimes, your reader can easily know the content from the post title with the thumbnail. You can see the demo form here.

It’s not too difficult to you if you know a little PHP coding. There’s en easy way to show the thumbnail in your blog. And you must add some code to the functions.php file in your wordpress theme directory.

Open the functions.php file with some code editor and plaster this code between the <? phpand ?>in your functions.php file, and then save it.

function catch_that_image() {
 global $post, $posts;
 $first_img = '';
 ob_start();
 ob_end_clean();
 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 $first_img = $matches [1] [0];
 if(empty($first_img)){ //Defines a default image
 $first_img = "your default Thumbnail URL";
 }
 return $first_img;
}

This code means it can find the first photo of your posts and got it as the thumbnail, if there’s no photo in your post it will show what you set in $first_img. When you finish this coding, add this code in what you want the thumbnail show.

<a title="<?php printf( __( 'Permalink to %s' ), the_title_attribute('echo=0') ) ?>" rel="bookmark" href="<?php the_permalink() ?>">
<img class="thumbnail" src="<?php echo catch_that_image() ?>" alt="" /></a>

In the end add this css code in your style.css file.

.thumbnail 	{float: left;width: 150px;height: 150px;margin: 0 12px 6px 0;padding: 3px;background: #eee;border: 1px solid #ddd;}
.sticky .thumbnail {background: transparent;border: 1px solid #000;}

And now it’s done, you can see the first photo of your post in the left side of your blog.