how-to-change-thumbnail-crop

Change thumbnail crop position in WordPress

on May 5, 2010 | 32,008 views

I get many complaints about wordpress thumbnail (aka post featured image in wordpress 3) crop position lately. Many of my clients tell that they need top part of the image as thumbnail rather than the useless middle part. That’s why i dived into the core and got the solution for cropping top part of the thumbnails.

Here i will show you how to change crop behaviour of wordpress.

Cropping function is called image_resize and it is located in media.php.

Step1. Open media.php file under wp-includes folder.
Step2. Find the function named “image_resize_dimensions” (Around line 309). Unfortunately this function is not pluggable and doesn’t use any hooks so we will edit it directly. Find the lines:

$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );

Step3. Those two variables define the start point of crop that will be used. Here is a sample image that will be cropped with those variables shown:

Step4. If you want top of part of the image as post featured image then $s_y value must remain zero. So we change that line to:

$s_y = 0; //floor( ($orig_h - $crop_h) / 2 );

Step5. Save the file and upload it to wp-includes folder.

Last Step. A post image is cropped at the first time it is uploaded. To update thumbnails you need this great plugin called Regenerate Thumbnails. This plugin takes post thumbnails and crops them again using your latest media settings. After you install it click on the “Regenerate All Thumbnails” button under tools. It will automatically crop all the post thumbnails again. This will take a minute or two depending on your server and number of posts you have. After the regeneration is complete all your thumbnails will be cropped from top.

ADVERTISEMENT
ADVERTISEMENT

About Shailan.com Staff

Shailan.com is a design blog about WordPress and web design. We regularly write about wordpress, plugins, themes, web design resources, php, css, jquery, adsense and more.. If you want to get notified about our posts, be sure to subscribe to our feed or follow us on facebook.

Share Your Thoughts

Your email address will not be published.

23 thoughts on “Change thumbnail crop position in WordPress”

    1. When we published this post, there was no filters to use for changing thumbnail crop positions. But now you can do this with filters. Read more on the comment.

  1. Jackson says:

    This is great, was looking all over for a solution to my thumbnail issue. Thanks!

  2. Thanks!!
    it really helps :)

  3. Steven says:

    Bravo… thx u

  4. MagisMedia says:

    This is one of the most helfpul tips I have EVER gotten by doing an Internet search. Thank you so much! It has saved me so much time! (P.S. my site is still in the design phase.)

  5. Jordan Haddow says:

    Only thing that sucks about this method is it will disappear the moment the media.php file is updated. The media file is a pain in the but and something that I think really needs work too. Hopefully the developers will be able to give it some attention soon.

  6. MaierWerx says:

    Very helpful… thank you!

  7. Calixus says:

    Thank you very much. It’s just perfect

  8. I’ve posted a solution that doesn’t require you to hack the core:
    http://bradt.ca/archives/image-crop-position-in-wordpress/

  9. V. says:

    Just what I needed it

    thank you

  10. derek says:

    Thank you, I had a client bugging me about the default cropping style. thank you so much. +Rep

  11. XDude says:

    Perfect! Thanks!

  12. Anonymous says:

    Hey , i’m on the same train.
    However, just as not all pictures need cropping in the middle, not all pictures need cropping in the top!

    Maybe you’ve noticed too, but WP Editor doesn’t affect the post-thumbnails. Modifying the WP Editor in the Media Upload dialog to be consistent with Post-Thumbnails would solve this, and would let people actually *Choose* their thumbnails.

  13. Glamour says:

    Thanks for the little hack. I found that in WP 3.0 the changes need to be made on line 360 and 361 instead of 309. Seems to work pretty good though.

    My pictured of people dont come out too well when WP does a crop of their middle section.

  14. Mel says:

    Worked great. Thank you!

  15. edubaldan says:

    Mate,

    Very good post. I was looking after it for a couple of days.

    I figure out that it may be a good idea, cropping images in the middle, but sometimes we want different results, like your client's case and my client's case.
    Well, I had accepted that I couldn't change this behavior, but was sure that WP had a workaround. So, I tried to use the built-in jCrop, applying the crop just for the thumbnails, but I don't know why it doesn't save the image correctly. The result was the original image, strange isn't it?
    But if I do the same thing, but apply for all sizes, it saves the cropped image as I want. Of course, loosing the original size. =O(

    I'm a PHP developer for a long time, but I started working with WP a short time ago. I'm trying to never hack the core, but sometimes, like this time, that seams that we don't have any other good solution.

    It's funny because sometimes, WP doesn't look like that was designed to be modular. Take a look at this post – http://wpengineer.com/a-solution-for-the-wordpr… – Why the hack CSS styles are been printed with that function? Why so many functions on WP prints HTML stuff, instead of returning values?
    Maybe I have to open my mind for it, but by know, it has been very painful to work with it.

    I wish I could use Expression Engine on my projects.

    Well, thanks a lot for the solution and sorry for all that talk hehe.

    Cheers!

  16. Cavamondo says:

    Excellent fix … do you reckon it would be possible to extend the crop function to not only the thumbnail but to all the media upload sizes as well? Small, Medium and large etc

    1. shailan says:

      As far as i know wordpress only crop thumbnails as they are theme dependent. Some themes use square thumbnails while others use rectangular. I will look into that.
      Thanks for the advice.