Post Pic

How to: Resize images on the fly

Ever wished you could be able to upload your images, and didn’t care about manually resizing it? If yes, here is a real time saver: A php script that can resize your images “on the fly”.

To achieve this recipe, follow these simple steps:

  1. Get the script and save it on your computer (I assume you named it timthumb.php)
  2. Use a FTP program to connect to your server and create a new directory called scripts. Upload the timthumb.php file in it.
  3. Once done, you can display images like this:
    <img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />

    In other words, you just have to call the timthumb.php file and pass your image as a parameter. same goes for desired width or height.

That's all. What a real life saver this script is!

Thanks to Darren Hoyt for this awesome script!

48 Responses

Apr 01 2009 10:10

A true ‘life saver’ indeed; currently implementing it on a gallery project and it works flawless…

Apr 01 2009 10:17

Thank you so much for this tip, I have been looking for something like this for a while and am going to implement this on my website too.

Apr 01 2009 11:07

Nice tip. Thanks for this

Apr 01 2009 12:05

Mmm I am having troubles getting this to work. The images don’t seem to load, only after a forced refresh they show up. Am I the only one having this problem?

Apr 01 2009 13:49

Looks great but it’s almost the same ammount of code as in
?

Apr 01 2009 15:21

Kill server

Apr 01 2009 16:27

There some themes that use this resizer. Thanks for sharing this “delicious” recipe.

Apr 01 2009 16:49

Side Tip: To make the image uncropped AND hold the height, set the width but make the height zero. Something like this…

&w=’465′&h=’0′&zc=0

Otherwise you need to manually input the actual height (or width) for each image. This way you can utilize the script in an automated way.

Apr 01 2009 18:59

@Kel never new that.. I use this script all the time, might change some dynamic.

Apr 01 2009 19:12

@WPCult Yeah, I did a lot of tinkering around on earlier versions of the script – trying to validate etc and came across this “feature” – might be a bug ;-) Either way, I’d exploited it on another site and it seems fine. Time will tell if it breaks – if/when – the script gets updated.

Apr 01 2009 21:22

Awesome javascript. It saves so much time. Thanks for sharing.

Apr 02 2009 00:03

Nice! I’m about to use TimThumb in my next wordpress theme, this’ll come in handy.

Apr 02 2009 11:23

You can always try the “Smart Image Resizer” is like TimThumb but with more options. http://tr.im/i8sc

Apr 02 2009 12:21

you might gave better picture of the script like what parameters are available and how to use it

/* Parameters allowed: */

// w: width
// h: height
// zc: zoom crop (0 or 1)
// q: quality (default is 75 and max is 100)

There is folder named “cache” needs to be created with CHMOD it to 777 so as the timthumb to function correctly. Make sure your host also supports GD library (which is default in most cases).

Apologize me if i am wrong.

Thanks

Apr 02 2009 15:24

This looks great, will see if I can attach it to a few projects

Apr 03 2009 17:10

Thank you very much for this tip, for me it was very difficult to reach this result.

Apr 04 2009 17:33

Awesome, I use it on all the themes that requires on the fly resizing.

Apr 05 2009 08:38

Thanks this is very useful as the images load in WP can be a hassle.

Apr 06 2009 02:45

So can I apply this to images in the content? I’ve got it in the excerpt by using a function that fetches the image URL.

But I don’t how to do this on pictures in the content.

Apr 12 2009 13:53

Thanks for the script, keep the great work! :D

Apr 15 2009 20:28

Thanks this is very useful.

May 05 2009 04:47

Great code!

I am having a little bit of trouble getting to work though. Can it be used with a custom field? eg.

<img src=”http://74.53.53.201/wp-content/themes/blank/scripts/timthumb.php?src=http://74.53.53.201/wp-content/gallery/clients/ID, $key, true); ?>&h=150&w=150&zc=1″ />

Thanks!
Stacey

May 05 2009 04:49

Sorry somehting went wierd when i pasted it in!

It should be:

<img src=”http://74.53.53.201/wp-content/themes/blank/scripts/timthumb.php?src=http://74.53.53.201/wp-content/gallery/clients/ID, $key, true); ?>&h=150&w=150&zc=1″ />

May 06 2009 01:06

Very good script, I made a little function that uses timthumb with an attachment so you dont have to set a custom field or anything like that.

http://snipplr.com/view/14280/get-wordpress-image-attachment-and-use-tim-thumb-to-crop/

Aug 18 2009 04:52

wow i was looking for this one too!! great blog!

Sep 14 2009 21:40

The resized image is larger than source image !

Dec 03 2009 13:01

nice code i always use this .
The resized image is larger than source image !
thanks

Trackbacks:

Leave a Comment

* Name, Email, Comment are Required