Post updated on May 18 2013.
First step - Fetching the first image on the post:
----------------------------------------------------------------------
This code basically gives us the ability to fetch the first image in the post. So, an image (cover for example) in the post is required for this to work.
Code:
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 = "/images/default.jpg";
}
return $first_img;
}
--------------------------------------------------------------------
Go here and download the latest Timthumb script, then upload the script to your theme's folder.
http://timthumb.googlecode.com/svn/trunk/timthumb.php
Then, find the files you want to edit, for example:
--index.php
--category.php
--archives.php
--author.php
--content.php
...etc.
Note that not all themes use the same files, so that's up to you to figure out.
Add this code where you want the thumbnail to show:
Code:
<div class="post_thumb">
<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&[COLOR=Red]w=100&h=100&zc=1[/COLOR]" alt=" " width="100" height="100" /></a>
</div>
h= height.
w= Width.
zc = zoom crop.
If you want to be able to fetch external images, open timthumb and find //Image fetching and caching around line 32 (as of this version) and set ALLOW_ALL_EXTERNAL_SITES to "true".
Third step - Adding some css code:
--------------------------------------
Get your style.css file and add this somewhere in there:
Code:
.post_thumb {
padding: 0 10px 10px 0;
float:left;
}
Last edited: