Skip to content

TimThumb Proportional Scaling

Moving the crop position used to be the most requested TimThumb feature – but then I added it, and so something else had to step up and replace it.

The next most requested feature is proportional image scaling. To be honest, this feature request had me confused for a while, I just couldn’t understand what people were asking for. TimThumb already had the ability to scale images proportionally, simply by supplying a single size parameter. However what, it turns out, was wanted – was being able to scale down the image so that the image remains in proportion, and it fits into the required dimensions – adding borders where necessary.

So that’s what I added!

Proportional Image Scaling

Usage is simple. The mysterious zc (Zoom & Crop) parameter comes into action, simply give it the value of 2 and it will apply the borders as required.

zc = Zoom & Crop

The zc parameter was introduced to TimThumb about 3 months after it was first published. The reason for the inclusion is that the scaling in the original version was purely scaling, there was no cropping. This meant that images could end up severely distorted.

When we fixed this feature bug the zc parameter was introduced. The idea being that existing websites would continue to work as they were. As time went on it seemed to be less and less relevant, until it got to the stage where I was considering removing it entirely.

With the new cropping modes this thought has ended. I have added some new scaling modes, as described below.

0 Resize to Fit specified dimensions (no cropping)
1 Crop and resize to best fit the dimensions (default)
2 Resize proportionally to fit entire image into specified dimensions, and add borders if required
3 Resize proportionally adjusting size of scaled image so there are no borders gaps

Scaling Demo

I have put together a simple demo showing how this Zoom and Scaling functionality works. IMO seeing it visually is a lot easier to understand than having it written down.

What’s next?

Now that the most requested features have been implemented, what more do I have to offer? I am sure something else will crop up, but I am not sure what it will be. However I am really interested to see what is to come.

Share

Join me, Dan, Ben Ao, Sam. They're all chatting about "TimThumb Proportional Scaling" below ›

Read Comments

40 Comments »

    • There’s nothing like this currently, but I have considered it and will likely add the colour setting. Not sure about the transparency option. That might get confusing when resizing jpgs (that aren’t transparent).

  1. Hi,
    This is a great plugin, I’m using that, and helped me a lot.
    Is there any parameter to delete the file, after create the thumbnail to save disk space?

    Thank you.

    • Hi – there is nothing for deleting the cache file. The cache file directory is emptied over time by TimThumb (to save disk space) and so the original files are needed to recreate the thumbnails when the cache directory is emptied.

  2. I must notice that a “crop only” cropping mode is missing. We have 3 resizing modes (0, 2, 3) and only one that crops with resizing (1). It is impossible, however, to zoom without resizing…

    • Solved this myself, below…

      // Get original width and height
      $width = imagesx ($image);
      $height = imagesy ($image);
      $origin_x = 0;
      $origin_y = 0;

      // generate new w/h if not provided
      if ($new_width && !$new_height) {
      $new_height = floor ($height * ($new_width / $width));
      } else if ($new_height && !$new_width) {
      $new_width = floor ($width * ($new_height / $height));
      }

      … I added …

      // prevent scale up
      if ( $width < $new_width && $height < $new_height ) {
      $new_width = $width;
      $new_height = $height;
      }

      • I decided not to implement this in TimThumb itself because TimThumb is meant to make the images the size you specify regardless of how the images are scaled, and this would not do that – however your fix looks like it would work in the same way my own one would.

      • upscaled images might get prety ugly. I would love a feature like this adding borders when ever the image is too small.

        or a max-zoom so a image is not scalled up 300%.

      • I’d vote for an additional parameter (something like up=true|false) to specify whether scaling up should be allowed.

        I think that leaves the integrity of the purpose of timthumb intact while allowing for maximum usability.

  3. On your demo timthumb has white borders, when I have come to use this on my site the “borders” appear black? Is there any way round this or am I missing something obvious?
    Really need a solution as I was planning on using timthumb for this.

    many thanks

    • the cc parameter accepts a hexadecimal colour code to use as the crop colour when resizing. The reason my images are a different colour is that my demo code is a little out of date.

  4. Hi there, thanks for the completely brilliant timthumb. It is quite simply awesome.

    You may already know this, but I discovered today that images with a + in the filename will cause timthumb to break. Not a real problem for me, I am simply working around it by telling the client to not use + signs in filenames, but I thought you’d like to know.

    • thanks for the tip – I need to do some testing with this to see if there’s a better way to handle these special characters. Glad you’re enjoying the script :)

  5. Hi Ben,

    I have a problem with timthum script (so it seems) and the new version of wordpress (3.3.1) Before the wp upgrade images on my website were displaying normally but now the thumbs are streched. I have tried everything possible (file/folder permisions, cache/temp folders, reinstaling theme, tried on a fresh wp install) but no solution. I am using awake 2.5 theme by http://www.mysitemyway.com (they cant solve it either) and like said wp 3.3.1.

    Uncle google did not give any solution even after long hours of searching…

    Here is an example of distorted thumbs: blog

    Will really appreciate help!

  6. Hi Ben,

    Thank you for a great plugin! It’s been very helpful in theme customization and design.

    However, one recent aspect could be addressed: hi-res screens (such as the Retina on iPad).

    is there a clever way of making timthumb calculate the required destination size > re-size and cut the image to double the destination size (provided the image is large enough — ei 300px = 600px ) > then reduce to fit the image to destination size while keeping it’s dimensions?

    An example in use would be: an image cropped to fit a 300x200px container, but clicking to view the cropped image shows it’s actually 600x400px in zise.

    I think this would be vital to current development and demand in website design. Everyone wants to adapt to hires screens!

    cheers.

  7. I’m using the bold news theme from Woo Themes and it uses TT. I can’t figure out how to keep all my images from having a white border of +-2-3 pixels.

    I don’t want a border around all my images. How do I change it to give me no border? I don’t see a timthumb_config.php file in my theme directories.

    Thanks.

    • TimThumb doesn’t add a border to your images so the problem is likely because of the css used in the theme. Anything ese will have to go through Woo as I don’t know what they have done.

  8. I’m not the greatest developer, but I try.

    My site http://www.comicbookbabylon.com is giving me issues. I have set the sizes of the images with wordpress to be 200 wide x 300 h. But they keep showing up all messed up. And try as I might, I can’t seem to get things right. I’ve looked to my theme support for help but get nothing. Anyhelp would be great!

  9. Hi Ben,

    I was having some problems to set the canvas color while scaling the image.
    I want the canvas to be black but it always shows up in white.
    Finaly I found out what I was doing wrong.

    According to the online manual you need to add zc=2&cc=(#000000)
    But this isn’t working.
    After some try and error got it to work using zc=2&cc=000000

    http://solid.alligence.com/wp-content/plugins/wordpress-gallery-plugin/timthumb.php?src=/wp-content/themes/solid/sources/img/6-425×1981.jpg&a=t&w=425&h=428&q=100&zc=2&cc=000000

    Maybe a tip to adjust the online manual ?

    Kind regards,
    Peter

  10. Hi Ben,

    Some of the images on my page are distorted. They weren’t always that way. When I inquired with the Woothemes team, they told me it was a timthumb scripting issue. I have activated and deactivated the script, but can’t figure out what’s going on. Please advise as to how I can fix this. My images are horribly skewed. You can take a look at http://www.lylproject.com. I”m using the Canvas 4 Woo theme.

    Your help is greatly appreciated.

    Warmest regards,
    Therese

    • The theme you are using currently doesn’t seem to be using TimThumb. The images that are stretched are the wrong size and so being squashed to fit the size. It’s not a TimThumb problem I’m afraid.

  11. Hi,

    I upload a lot of images to my WP site. WP makes the Thumbnail size, Medium size and Large size. This works fine. But the original file is also still in my image folder with the original size. I’m looking for a solution when I upload an image it will resize to a maximum width, so my orignal image is much smaller and I don’t have to manually resize every image before uploading.

    So for example. I upload an image with size 1900 x 1400. This will be stored by WP as original (which is way to big). Now I have to change this every time manually before upload the image to 1000 x 600 (for example) to make it smaller. This is a lot of work. Is this reziser script the solution for this problem?

    Kind regards,

    Willem

  12. When timthumb resizes an image, it puts a nice, neat, 3-5 pixel border around the image. I don’t want that border at all –I’m resizing to inside a slider, and the extra border is not only messing up the resizing, causing the bottom right corner to be cropped out, it also messes up the way the image looks. Even if I precrop the image to the exact size needed, when timthumb processes it, the image reappears with a white border.

    Is there any way to turn this border off? I don’t want it to be transparent, because that would still leave the image in the wrong place on the screen.

    Thanks!

    Russ

    • Hi Russ – I’ve never seen or heard of anything like this. TimThumb doesn’t add any borders to the resized images so something else must be going on here.

  13. I have tried added ct=0 and the border was shown. But anyway, I would like to display the picture with color frame such like picture pasted on the color square. Is it possible to do this?

  14. I managed to fix the crop image prob on my reviews pages.
    But I cannot figure out how to fix it on my blog posts on the homepage.
    I’ve reconfigured file cache permissions from 755 to 775, and
    timthumb.php to zc=0 but if you go to my homepage,
    the 2 pics are still reading zc=1.

    Ex>>http://www.mrdeesreviews.com/wp-content/themes/proreview/timthumb.php?src=/wp-content/uploads/2014/02/Valentines-Day-Sucks.jpg&h=75&w=75&zc=1.

    Is there something else I should do?

Comments are closed. Let's continue the conversation on Twitter.