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.

 

TimThumb Demo: Part 5 – Zoom, Crop & Scale

A page demoing the different ways you can crop and zoom images when resizing with TimThumb. More info is available on the post TimThumb: Proportional Scaling

Basic Demos of the Different Filters

1.

timthumb.php?src=atlantis-dock.jpg

Default settings

2.

timthumb.php?src=atlantis-dock.jpg&zc=0

zc = 0: Resize to Fit specified dimensions (no cropping)

3.

timthumb.php?src=atlantis-dock.jpg&zc=1

zc = 1: Crop and resize to best fit the dimensions (default behaviour)

4.

timthumb.php?src=atlantis-dock.jpg&zc=2

zc = 2: Resize proportionally to fit entire image into specified dimensions, and add borders if required

5.

timthumb.php?src=atlantis-dock.jpg&zc=3

zc = 3: Resize proportionally adjusting size of scaled image so there are no borders gaps

Leave a comment