A few articles back I mentioned that I would do a post about the thumbnail program that this blog uses … TimThumb. Without further ado let’s take a peek at this small php program.


What This Program Does
Timthumb.php will crop, zoom, and resize any and all images and photos on your website. This program will work with .jpg, .png, and .gif images.


Why Do We Want This Program
I like this program because of one thing … simplicity. Timthumb came with this theme originally and I have since learned to love it. There are probably thousands of different WordPress gallery plugins, programs, and thumbnail programs. Some plugins, by their nature, may be easier to install, but they are not as flexible.

Timthumb.php runs the following special segments on this blog: handles all of the article image thumbnailing, runs the mini latest posts gallery at the top of the page (article here), and my current adventure of turning my photos category into a gallery. All of the design and layout is handled by your theme and it’s stylesheet so it makes it a lot easier to implement timthumb in many different areas of your blog.

Because only one PHP file is required to do all of that, I have decided to get rid on my photo gallery plugin ( YAPB ) in favor of using timthumb.php.

The flexibility of timthumb, along with the ease of having only 1 file to look at anywhere thumbnails or galleries are concerned, makes it a win-win for me.


Installing TimThumb
Grab your copy of timthumb for free on the TimThumb Google Project Page.


1. After you download your copy upload it to your server. It would probably make the most sense to place it in your current THEME folder like:
MY_WEBSITE/wp-content/themes/MY_THEME/timthumb.php

2. On your “Add Post” page in WordPress administration you will need to ad a custom field at the lower part of the page. Let’s name this custom field “thumbnail”. From now on you can add the URL of the image you want to use as a thumbnail in this field.

3. Add the following code to your theme pages wherever you would like the thumbnail to appear:


<?php
$thumbnail = get_post_custom();

$scrap = get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME/timthumb.php?’;

if (empty($thumbnail['thumbnail'][0])) { $imagpath = $scrap . ’src=’ . get_bloginfo(’wpurl’) . ‘/wp-content/themes/YOUR_THEME/images/thumbnail.jpg’ . ‘&amp;w=140&amp;h=140&amp;zc=0&amp;q=90′;

} else {
$imagpath = $scrap . ’src=’ . $thumbnail['thumbnail'][0] . ‘&amp;w=140&amp;h=140&amp;zc=0&amp;q=90′;

}
?>



Now let’s look at the code piece by piece …

The $scrap line … this is the path to your installation of timthumb … you will need to change your theme name. If you installed the file in your theme folder then everything else on this line should be correct, but double check that this path is correct.

The if empty line tells timthumb what to do if you have not included a thumbnail with your post. Upload a generic thumbnail to your themes/images/ folder that timthumb can use. make sure the name of this image is ” thumbnail.jpg ” – OR – change the name in the code above.

The else line creates the thumbnail for your post if you have specified one.

The settings. In the above code you will need to change the settings …
“w” stands for the desired width of the thumbnail,
“h” stands for the desided height of the thumbnail,
“zc” stands for zoom crop (0 is no, 1 is yes),
and “q” stands for quality (75 to 100 … 75 is default).

Finally, you will probably want to wrap the above code in a div class/id so that you can influence the display. You can add your new class to your theme’s stylesheet.


As you can probably tell from the above code, there is a lot of flexibility here and that is what I like with using this program. You can run this code anywhere on your page and you can use it as many times as you would like. In addition, in each and every application of this code you can change the setting to anything you would like.

My next major project with this code will be developing photo albums to display below below photo posts. These will contain thumbs of other photos directly related to the original post by category or tag. I hope to use a new “Custom Field” which will allow me to specify which category, tag, or search term to use in gathering the thumbs … everything else will be automatic. This, though, is probably still a while away …


Hopefully this article has been a help to those of us who are not “code” addicts. I like to pass-along tidbits of information that might allow non-programmers the ability to modify their own websites. Please keep in mind that I am not a professional programmer but I have been building and modifying websites since 1995 using HTML, cgi, perl, MIVA, PHP, and CSS. Suggestions on other ways to reach the desired goals above are always welcome … please consider leaving a comment !

Always remember to save copies of your original files BEFORE you modify them. This will allow you to easily revert your web site if the changes do not work.

Comments ( leave a comment here ) and thoughts ALWAYS welcome !

• Go ahead and STALK ME – electronically of course – Subscribe Here

Related Posts:

• * How To Create Mini Photo Albums on WordPress Post Pages


• * Creating Multiple Header Files In WordPress


• * Modifying The Posts Per Page Query In WordPress


• * How To Display Subcategories & WordPress Category Templates


• * Add A Favicon To WordPress

---

Technology and Programming categories:

• CSS and PHP
• Design Techniques
• Images and Graphics
• The Internet
• WordPress Plugins
• WordPress Templates & Design

>>> See All Technology Articles <<<

---

Related Tags:

Graphics and Icons • Programming • Web Site Design • WordPress