How to Automatically Add Thumbnails to Your Home Page

Adding a thumbnail to the post excerpt in your main page isn’t really that difficult. In fact, all you really have to do is to define a custom key in the index.php and assign an image to that key. The problem, however, is that you have to constantly maintain that key through this method, which can be quite a hassle.

Fortunately, there is a way to add the first image of each post as a thumbnail to the page excerpt. No longer will you have to update the key on your image; the image will automatically be added in. The process can be done in 3 steps.

Step 1: Define a function to grab the first image from each post

To get started, open your theme’s function.php file with the Notepad and add the following code:

// retrieve the first image from the post

function getImage($num) {

global $geek;

$geek = 1;

$content = get_the_content();

$count = substr_count($content, '

$start = 0;

for($i=1;$i<=$count;$i++) {

$imgBeg = strpos($content, '

$post = substr($content, $imgBeg);

$imgEnd = strpos($post, '>');

$postOutput = substr($post, 0, $imgEnd+1);

$image[$i] = $postOutput;

$start=$imgEnd+1;   $cleanF = strpos($image[$num],'src="')+5;

$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;

$imgThumb = substr($image[$num],$cleanF,$cleanB);   }

if(stristr($image[$num],'

else {echo bloginfo('template_url')."/images/default-image.png";}

$geek = 0;

}

?>

After adding the code above, save the file. It is highly recommended that you keep a backup of the previous function.php before editing it, just in case things go awry. The above code will make it so that it will show an image that you chose on any post, with the default image as template_url/images/default-image.php.

Step 2: Resize the image from the post

The image size in each post can vary, which is why you will have to resize the image in the home page to show as a thumbnail. To do this, all you have to do is use the TimThumb PHP script. Search for the code for TimThumb in GoogleCode and copy it. Open up Notepad, paste the code into the file, and save it onto your theme directory as timthumb.php.

Step 3: Add the script in index.php to show the excerpt thumbnail

For the third and final step, first go into your theme folder, open the index.php file and find the line:

Next, add the following code before the above line and save the index.php file:

&w=150&h=150&zc=1&q=70" alt="" />

Note that you can change the thumbnail’s size by changing the &W and &h values in the code.

That’s all you need to code in to automatically show the image thumbnail with the home page excerpt. Only thing left now is to add some CSS rules into your theme’s style sheet. Here is an example:

.home_thumb a:link {display:block; float:left; padding:6px; background:#eee; width:160px; height:160px; margin:6px 6px 0 0;} .home_thumb a:hover{background:#C4C4C4;}

And that is all; all your images will then be uploaded automatically as thumbnails, and you no longer need to bother yourself with maintaining them.

BIO:

This content is brought to you by Test4prep.Are you seeking for this 1Z0-515 assistance? Let,s get the advantage of 1Z0-520 and pass your IT certification exam on first attempt with 100% money back guaranty.