Moving the crop position around is by far the most popular feature that has been requested for TimThumb. And today it has been officially released!
To be honest the cropping code was something I had put off as I wanted to keep things nice and easy to use; but then a month ago I found a comment on the TimThumb Google Code page that gave me a nice simple method for adding the alignment code.
TimThumb Cropping Alignment/ Positioning
The code allows you to align the cropping region to different edges of the image. This isn't full positioning with x,y co-ordinates, but 99 times in 100 you won't need that anyway. Since this reduces the complexity considerably it made implementation simpler.
Usage
Cropping alignment requires 1 extra parameter being added to the TimThumb query string. The letter a will let you set the alignment.
As with everything TimThumb the parameters are straight forward to understand. They are:
- c : position in the center (this is the default)
- t : align top
- tr : align top right
- tl : align top left
- b : align bottom
- br : align bottom right
- bl : align bottom left
- l : align left
- r : align right
An example of this in use would be:
timthumb.php?src=image.jpg&w=100&h=100&a=t
As normal there's a demo page full of samples showing what can be done with the changes.
Theme Integration
It would be no good adding this functionality if people using my themes couldn't make use of it, so I have now added support for it to Elemental, TheLocal, Nominate, and Mimbo Pro. Usage varies slightly in each theme but the info needed has been added to the relevant theme documentation pages.
57 Responses to “Using TimThumb Part 4: Moving the Crop Location” Leave a reply ›
Absolutely Brilliant... nothing more I can say! You've solved a major issue for me!
Glad it helps
Who knew it would be so simple. How far back does this alignment apply too?
Hey Austin - not sure what you mean? If you mean in time, I committed the update to google code 2 days ago
I meant, which version of timthumb. Does it have to be the latest?
Ah Sorry - yeah. The cropping positioning was added this weekend, so grab the latest version from Google code if you want to use it.
Thanks alot Ben,
I've been using background-position for this since your first tutorial, but this feels cleaner, and the cached images will smaller too.
Thanks a lot Ben! Our users have been aching for something like this
Took a while but I got there in the end!
I implemented it in our framework now, but I can't seem to find any use for the tr, tl, br, bl options... As on your demo page I couldn't find a use for them...
What times can these be useful?
honestly - I'm not sure. They seemed like a good idea (and were really easy to add in), but realistically you can use them interchangeably with t, l, r, and b.
In Elemental, my WordPress framework, I just used t, l, r and b as well
Yep that's what I figured
Hi Ben, thanks for the awesome update : )
I'm having an issue though - all of the two letter crop positions (bl, br, tl, tr etc..) don't seem to work. While I have all of the one letter positions working flawlessly (t, l, b, r etc..).
I also noticed you didn't include any of the two letter crop positions on your demo page. Is there a reason for this?
Thanks a lot, man!
Because of the way the positioning works the 2 letter codes essentially replicate the functionality of the 1 letter codes. Everything you can do with one, you can do with the other - but the two letter codes take a bit more thinking to be useful - so I kind of glossed over them. In reality I don't think they will be that useful, but they're there if you want them.
As for not working - I can't see why they wouldn't. Do you have any examples.
I can't get the two letter crop positions to work either. If I try 'tl', it will just crop the top. If I try 'lt', it will just crop the left.
Hi Jordan - there seems to be a problem with the tl cropping. I will get it fixed for the next version.
Aloha Ben, love your coding gift to the world here!
Feature request, would it be possible to ever add in percentages, or more parameter values such as pixels in addition to the plethora you did?
Basically, the images I am working with are of people standing, often times with their arms raised.
-So a vertical crop of center (default) puts the crop at their belt (you can imagine how fun that might be) or
-a Top (a=t) results in their hands/arms but usually misses the face.
Neither of which show their face/torso.
If there was a way to pass a y percentage (x would be useful as well I imagine), say 0% for the top, and 50% for the middle, or perhaps a px value being set as the origin of the crop, it would let me find the sweet spot for the majority of images and get their faces included in the crop.
Thanks again Ben! Don't let my request for more be construed as anything other than praise and gratitude!
Clarke, ClarkeDesign.net
Hey Clarke, thanks for the message and for the feature suggestion. I doubt it will happen soon but this is definitely something I would consider adding in - I can totally see how this would be useful
I've added your suggestion to the wishlist on Google Code so that I don't forget - http://code.google.com/p/timthumb/wiki/Wishlist)
Hi,
I insert these lines after line 634
if (is_numeric($align)) {
if ($cmp_x > $cmp_y) {
$src_x = round( ( $width - $new_width*$cmp_y ) * $align/100);
}
else {
$src_y = round( ( $height - $new_height*$cmp_x ) * $align/100);
}
}
and if you give the variable "a" a numeric value instead of letters "t,b,r,l" , it would crop the image exactly at that percentage position, like 0% for top or left, 50 for middle and 100 for right or bottom, since in zoomcrop mode, I think one dimension should always be in full length (no crop).
Hope this helps
Thanks for that Hoang Phan, I added the code to my timthumb and it works as expected.
Thanks, Ben. I've been waiting for this feature. It help a lot of my work
Hi Ben,
Awesome, awesome feature. Same goes for TimThumb in general! Love it!
One question, we've had to transfer 1000s of images over from another site to one that uses this, and we find ourselves in a similar position to Clarke above.
We're also looking for the sweet spot in our images, which unfortunately seems to be somewhere between a=c and a=t.
Is there a way to code this in?
Thanks again for a truly brilliant piece of code,
Gav
This isn't really possible at the moment, I'm not sure of an elegant way to do this but am open to suggestions (in particular with code
)
Hi Ben,
I was looking into a jQuery plugin, that could be very useful with timthumb:
http://tutorialfeed.net/...ent/jquery-facial-recognition
Is there any possibility to add a coordinates and the timthumb crop based of the center of the coordinate?
Thanks for the awsome plugin
Hello,
where should i edit, that in single post the image wont "fly" somewhere up? i mean, i upload 400x400 image, but it shows only 400x318...
Thanks for help in advance
I am afraid I don't know what you mean?
I updated to this version of timthumb but now it doesn't work at all, images don't appear on Mimbo 3.0 .. any suggestions?
looks like it's working to me...?
Ben.. thanks for the reply, I have the old script up since I couldn't get the new one to work. When I replace the old file with the new one, the images don't appear, just the border (makes little squares where the photos should be).
Just an info, sometimes timthumb will not work in a few server, thus it will not generated the image for your site. After searching for the problem I found that some server/host will blocked the use of php function of readfile making all the script will not work. If you face this kind of problem, just simply change the function with file_get_content and voila your timthumb will work. And I want to ask to ben about this trick, is there a chance that it will make the script bugged? Or there are any method other than this that less risky? Thanks for your attenttion.
Hi Dimas - thanks for the message. It's a shame that readfile doesn't work... I used to use file_get_content and stopped using it for the same reason, on some hosts it's switched off. Using file_get_contents won't break anything and is perfectly acceptable. Glad you worked out a solution!
Great! features that I need..
But I see you didn't give options for TOP-CENTER
I think its good.
I have find that guy at http://blog.studio-xl.com/work/timthumb-cropping-mod
has implement top-left.
Thanks!
Top on it's own will do 'top-center' - a top left fix will be int he next version of the plugin.
Glad you're liking the script.
Hi,
what if I don't want any of the images to be cropped at all? If I only want to define the width or hight to the images and thumbnails, but no cropping? I found a wonderfull simple photo gallery, but I really can't make a gallery to my photographer client, where the images are cropped and not original images.
Thank you so much in advance, if you could answer me!
yayayay! this is a great news *nods* thanks for this. it works perfectly.
Hello,
your script is really a great benefit for my design process! ThumbsUp!
Anyway one question:
Is it possible to crop without scale or better with a custom scale?
Example: Scale original image down 50% > crop from center > take this crop an place it in website.
thanks for answer
TimThumb only scales to specific sizes I am afraid.
exactly what I'm looking for! I thought I'm gonna modify something inside the timthumb.php source code. Whew! This saved me a lot of time ^_^
Hello,
Can you add a new crop location?
I want a top-center location.
So it's between the top and the center.
Kind regards.
Djoey
Hi there, you just need to use the top alignment for this.
Hi Ben, love your Timthumb!!! Rocks!!
I am sure you've been asked this question already but I thought I can push you a bit..ehehe...When will we see an option to choose the border color on crops? Currently it just defaults to black...Would be awesome to be able to choose...
Anyways just checking...thanks again for a GREAT script...
Hey Ben,
I love the script. Used PHP Thumb for years, but it hasn't' been updated since 2008!
1 feature that I'd love for you to add... a max & min height & width.
When I use your script on an ecommerce site, there are so many images that need to be resized. Occasionally there are these tiny images that the client will use. For example, their images range from 100 x 100 and up. So if I have an image resizing at 200 x 200, the image looks stretched and distorted.
Not a big deal & in the current case, I'm going to have the client update the image to a larger size. But it is a nice feature to have.
I've actually written this for a custom script I used to use.. so if you want the code, let me know..
Hi Jesse - thanks for the comments. I got your email and will reply shortly
Hi Ben, thanks for developing this useful script.
I want to do top-center for all my thumbnails. How do I actually implement this? Do I put "a=t" somewhere on timthumb.php or where?
You put in parameters for individual images, how about if I want all my image thumbnails to be cropped top centre?
I have almost no experience in coding, so if you can lead me in the right direction I'd be so grateful.
Thanks again
Hi,
Where exactly does this edited code go?
My timthumb.php file has hundreds of lines
and I have dozens of thumbnails on my site.
Many needing their own cropping parameters.
Your example:
timthumb.php?src=myphoto.jpg&a=t&w=130&h=90
is clear, but I can't find where to place it. Thanks.
You would need to build something into your cms so that you can filter the content as you wish. You shouldn't start editing the TimThumb code as that will make updates a nightmare.
Yes, thanks. I found out that it is the gallery style template.php where I change the code. However, can the placement of the thumbs be made individually, or is the change global to the entire template? I have a mix of horizontal & vertical images in my gallery, and only need to change the vertical thumbs alignment. Thanks.
Can I have cropping with fixed points, Like 50px from top and 20px from left?
If this can be implemented then this would be a very easy for for image cropping functionality.
If there is such functionality then pl share with all..
I am afraid there's not currently such a function although a few people have requested it. At the moment I am not sure how this would from a usability point of view, but I am aware of the desire and it may be added in the future.
I am totally new at this. I really want to use this code, but don't even know where to paste it... within my timthumb.php file? If so, where? or do I need to paste it in my theme gallery php file?
Feel so stupid, please help, this HAS to work!
You don't need to make any changes to Timthumb.php itself. All changes would be in your theme or website code.
So if my WP theme is made up of all php files (no html files) I should add it into the corresponding gallery php file I'm guessing...
I've tried that, maybe my file paths are incorrect...
- Can the images I'm calling be anywhere within my site files, or do they need to be somewhere specific in reference to my timthumb file?
- Do I need to add anything to the code (other than specific file path or course) you've provided?
- Can I insert it anywhere within my php file? or must it be in a specific place?
Thank you SO much for responding. I'm panicking!
Hey Ben. Nice work.
One feature I'd love to have is setting the zoom factor. It's quite useful to have that for applications that require getting a close up shot at a face or object in a picture.
Interesting idea and one that hasn't been suggested before. I don't know how many people would use this but it's certainly something I would consider in the future.
Hey Ben - love timthumb and the cropping is awesome. Is it possible to have timthumb not resize my image, but just crop it? So using the crop alignment, I can choose what part I want - but I would like to keep the image at 100% size and just crop to the thumbnail size. Would be helpful for when the thumbnail is actually part of the image or where the thumbnail and image are very similar size and you are just trying to crop the image basically to make it fit somewhere.
Thanks and love what you are doing!!
Kevin
Hey Kevin - this isn't something I've ever considered. I wonder if this would be better done with a jquery plugin of some sort? I assume you'd need to have some method for controlling the crop position and I know there's a script that does this (jquery crop or jcrop I think)