Skip to content

Using TimThumb Part 4: Moving the Crop Location

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.

Share

Join me, Magnus, The Frosty, Javi. They're all chatting about "Using TimThumb Part 4: Moving the Crop Location" below ›

Read Comments

73 Comments »

  1. 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.

  2. 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

    • 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

  3. 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 :))

  4. Hello,
    where should i edit, that in single post the image wont “fly” somewhere up? i mean, i upload 400×400 image, but it shows only 400×318…
    Thanks for help in advance

  5. 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).

  6. 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!

    • 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.

  7. 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! :)

  8. 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

  9. 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 ^_^

  10. 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

  11. 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…

  12. 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..

  13. 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

  14. 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.

  15. 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.

  16. 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.

  17. 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!

  18. 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!

  19. 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.

  20. 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)

  21. Hi, I am confused of where to put in the code above to remove the cropping of images? Where in the timthumb.php file is it? I am using Kingsize theme.

    Thanks for any help!

    • Hi Henrik – you should not edit timthumb.php – you would need to edit the theme. I would ask the theme developer the best place to put this.

  22. I am hoping you can help. I am trying to build a site that utilizes timthumb.php.
    It always crops in the middle which as you said is the default. I believe this is the line I need to change to get it to crop at the top:

    $small_image_url = get_stylesheet_directory_uri().’/timthumb.php?src=’.$image_url[0].’&h=’.$pp_gallery_height.’&w=’.$pp_gallery_width.’&zc=1′;

    I just don’t know where to add a=t. Any help is greatly appreciated.

    Thanks!

    • $small_image_url = get_stylesheet_directory_uri().’/timthumb.php?src=’.$image_url[0].’&h=’.$pp_gallery_height.’&w=’.$pp_gallery_width.’&zc=1&a=t’;

      should do the trick

  23. hi could you please tell me where can i insert the timthumb.php?src….?

    in img tag only or we can write directly..i am new to php.

    thank you in advance..

  24. hi.. thanks is really help me.. how van i learn all of the resize and cheange qulity and another… of this script???

  25. I need this type of cropping.

    No cropping will occur and it will adjust automatically to fit the container size if if we set –zc = 0: Resize to Fit specified dimensions (no cropping)– like timthumb.php?src=atlantis-dock.jpg&zc=0—

    My wordpress theme have TimThumb.php.
    But i don’t know how to edit it to get the above type of cropping.
    Kindly help me…

  26. First: BIG THANKS goes to the developer. Thank you so much for the free OpenSource type PHP script.

    I am a Geo science student and trying to crop a Birefringence chart. I want to get x and y position for the starting point of the cropping. I know we have the left, right and top, bottom. Is there way to move the starting position of the crop? For example, how can I crop this image http://sanuja.com/timthumb.php?a=l&w=2000&h=68&src=http://sanuja.com/BirefringenceChart.png so that I can get a full original height, but only showing the second section of the image? (black bottom border tick marks)

    Thank you.

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