a new start

Since i love this TimThumb script so much, and its so useful. That’s why i want to share this knowledge with all of you. First thing first, what is TimThumb? TimThumb is a php scrip to re-size image on the fly so you don’t need to upload multiple size image. All you need to do is upload the largest size needed. Why don’t just set the size? Its because set the size on the CSS or on the HTML wont reduce the image size!

THE BASIC

to use TimThumb all you have to do is like this. Lest say you want to display image that have 1280 w and 768 h, and you want to display it in 800 w and 600 h. The code is :

<img src=”/dir/timthumb.php?w=800&h=600&zc=1&src=/dir/yourImageFile.jpg” />

• “/dir/timthumb.php” is where you put the TimThumb php file.
• “/dir/yourImageFile.jpg” is the image you want to resize.
• and in between them is the parameter, w for width, h for height, zc for zoom crop option (more detail about this later).

still unclear? you can visit the official webpage for more info.

THE WORDPRESS CODE

the common first mistake when use this TimThumb script with wordpress is writting the correct URL to the TimThumb script. Lest assume the TimThumb script is in your template folder together with the index.php of your template. So this is the code you have to write :

<img src=”<?php bloginfo(‘template_url’);  ?>/timthumb.php?w=800&h=600&zc=1&src=/dir/yourImageFile.jpg” />

See the deference? Yes you need to add the “<?php bloginfo(‘template_url’);  ?>” since you use it on wordpress. The main use of this scrip (for me). Is to create a thumbnail gallery without upload more image file just for thumbnails.

THE “zc” PARAMETER

look at the illustration below

Do you get it? if you set the zc parameter to 1. The image is cropped like the second image. The black area is the part of the image that will be removed. And if you set the zc to 0 or not set it, the image will be stretched like the third image.

The zc parameter don’t have any affect if you only set the width or the height. For example “?w=500&zc=1&src=image.jpg”

THE HACKING

Just notice it lately that this script don’t have “use w and h as the max size and preserve aspect ratio ” feature. Yes i don’t know the name for that ^__^. For example, you have a 500 x 500 div as image container and you want to put a dynamic image that can be landscape or portrait position. And you don’t want to crop the image.

So if the image is landscape, the image width will set to 500 and the height will follow according to it’s ratio. The problemo is here. if you set the zc to 0 the image will stretched and looks funny. And if you set the zc to 1 you can’t see the whole image because it cropped.

The solution is add some hacking to the timthumb.php file. On line 107 of the script, after get the original file size, add this line

if($zoom_crop==2){
$zoom_crop=0;
if($width>$height){
$new_height = 0;
}else{
$new_width = 0;
}
}

And then use parameter zc=2, dont forget to set both the width and the height.

LAST WORD

That’s all for now, i hope this information is helful