Blog

Image Crop Position in WordPress

November 29th, 2011 at 6:22pm | 36 Comments

I just submitted my first WordPress core patch today and have been receiving lots of positive feedback. It allows developers to set the crop position by specifying an array for the $crop parameter in the add_image_size function (see the Trac ticket for more details). WordPress 3.3 is at beta 4 at the moment, so it won’t make it into the 3.3 release. Hopefully it will make it into 3.4 and we can all enjoy cropped images with proper positioning (especially screenshots).

If you’ve done a Google search for a solution to defining the image crop position, you will likely find several articles on how you can hack the WordPress core to change the crop position. Gross! Not only is it terrible practice to edit core WordPress files (#1 reason: makes upgrading a royal PITA), but this solution also changes the crop position for all your images. What if you want different crop positions for different image sizes? The following solution accomplishes this without hacking the core.

Copy and paste the following code into your theme’s functions.php file (or create an include file) and use the function bt_add_image_size instead of add_image_size. Once the patch is implemented in a core release you should be able to revert to using add_image_size and remove the code you copied into functions.php. As a bonus, I’ve included code that properly rotates photos containing EXIF data indicating the photo should be rotated for viewing. If you need to regenerate your previously uploaded images, I recommend Alex’s Regenerate Thumbnails plugin.

Wouldn’t take much to make this into a plugin, but it’s not worth going through the whole process for me personally.

WP Migrate DB Pro - Get 20% Off!

Way back in 2009, I released a free plugin called WP Migrate DB which became pretty popular in recent years. So, I decided to develop a Pro version of this plugin which eliminates the manual work of migrating a WP database. It allows you to copy your db from one WP install to another with a single-click in your dashboard. Especially handy for syncing a local development database with a live site. Learn more »
Get 20% off — Coupon code: BRADTCA20.

Related Posts

About the Author

Brad is founder of Delicious Brains, a company building super awesome products for WordPress, including WP Migrate DB Pro, a huge time saving tool for WordPress developers.

  • http://adhdmomma.com Penny

    I received an error message when I copied this into the functions.php. Something about an unexpected “<". Is there a particular place within the existing code I should paste this addition?

  • http://bradt.ca/ bradt

    @Penny Sounds like you need to remove the beginning “<?php”. Your functions.php likely already has this at the very beginning of the file. I should have mentioned, this code is intended mainly for web developers.

  • http://www.janegbert.nl Jan Egbert

    This is a very welcome patch! I would however add an option to override default settings for specific images. Let’s say I want to crop pictures in the center by default, but occasionaly I upload a portrait picture… I don’t want the person’s head chopped off. :)

    This probably is plugin territory…?

  • http://ihunzai.com Imran Hunzai

    Thanks for the post. I would love to play around with the crop thingy. Let’s hope you put a better patch next time.

  • http://www.pathorsley.com Pat

    Nice one! bummer it missed 3.3. There’s been more than a few times I’ve wanted some control over this! Hope it makes it in there for the next major release.

  • Jane

    Exactly what I was looking for, thanks!

  • http://www.otreva.com Otreva

    Just what I was looking for thanks! I am having a slight problem in getting the size I want and having it display center top. Hopefully you can help:

    I included the above code and added this to my functions:
    bt_add_image_size( ‘lawyer-thumb’, 250, 250, array( ‘center’, ‘top’ ) );

    But it is re-sizing a 300×400 to 187×250. Shouldn’t I be getting a 250×250 centered and top cropped?

  • http://www.otreva.com Otreva

    Sorry I managed to not read fully.

    Regenerating thumbnails worked well perfectly.

  • http://www.jarnesjo.net Nicklas Jarnesjö

    Perfect. Just what is was aiming for. Hope they will approve into to the core of WordPress.

    One little thing is if you already have a add_image_size with the same size and croped = true it would not work.

  • Pingback: Bestämma image crop position i WordPress - Nicklas Jarnesjö

  • http://zao.is Justin Sainton

    FWIW, you could replace use the __return_array() function instead of creating bt_intermediate_image_sizes_advanced() for that purpose. Great patch, hope it gets into core.

  • http://www.hellomaxmin.com Max Min

    Wow, thanks for sharing this with us. Just installed your patched and it’s working perfectly!

  • http://www.to-wonder.com Luc

    This is a very welcome patch! Weird that they didn’t take it in the 3.3 update… i’ll be using it a lot! Thanks!

  • http://www.greenflagseo.com Joe

    So if I have an artist bio page with a grid of image thumbnails, but only two of them need to be cropped in the top portion how would I implement that. Could I add a custom field hook to the post where the image is located?

  • http://bradt.ca/ Brad

    Use the manual image manipulation tools built into WordPress.

  • http://www.ostheimer.at Ostheimer Webdesign

    I saw something like this implemented into a theme by woothemes. Great addition, just implemented it for the portfolio (Referenzen) of my new website and it works like a charm – thanks!
    If I can help you out with something related to Austria or German maybe – obviously I can’t help you with WP-programming ;-) – just contact me!

  • Tim Thompson

    This is EXACTLY what I needed for a project and just in time!!!

  • Vadims

    Excellent job Brad. Works perfectly and it is very easy to follow.
    Keep up the good work!

  • Alex

    Thanks!!!! Waited 2 years for this!

  • http://www.stephanis.info/ George Stephanis

    Just a friendly reminder that as of WordPress 3.4, you can do something similar to this via a filter, without hacking core.

    Directions on how to do it

    It doesn’t let you specify it in the thumbnail declaration, but it’s something until the patch gets rolled in.

  • http://www.exigences.biz Simon

    Hi, this is look extremely useful and clever. Cropping image isn’t one of WP greatest features and being able to choose cropping point on a per-simage-size basis is a good news (as good as beign able to crop differently from the media editor for any custom image size, too ^^)

    Just a quick question : is it possible to update thumbnail’s options with this ? Or, as I understand, it’s only for new custom image sizes ?

  • Pingback: Change Crop Position in Image Resize and Thumbnail - WPMize

  • Pingback: Image Crop Position in WordPress – bradt.ca | Scion Players

  • Pingback: WP Late Night #26: “JSON is the Twinkies of APIs” | WPCandy

  • Pingback: WP Late Night #26: “JSON is the Twinkies of APIs” | Diancin Designs

  • Dave-o

    Thank you so much for putting this together. HUGE time saver, since when I first jumped into a client’s site I’m working on, I first realized that when WordPress means “hard-crop,” they actually mean that the image is resized first and THEN cropped. I needed something that actually does a crop from the full size (in my case, I’m using center-center positioning). For my purposes, I modified the bt_image_resize_dimensions function to either use WP’s version of “hard-crop”, or to actually hard-crop the image (I have no need to use WP’s bounding box resize). Function is here, in case it helps someone else: http://snipt.org/vQic8

    Cheers!

  • http://www.shriramsoft.com/ dev

    Thanks Brad !
    Solved my issue I have been struggling for long time.

  • SoN9ne

    I have a question before I test this out.

    I see:
    if ( !is_null($dest_path) and $_dest_path = realpath($dest_path) )

    should that be:
    if ( !is_null($dest_path) and $_dest_path == realpath($dest_path) )

    Or are you purposely defining the $_dest_path?

    Thanks!

  • http://www.mediabase.at J. Schneider

    Thank you Brad,

    stumbled upon your post by accident and am very happy I found it. Helped me with a cutomers website!
    I will definetly check out your post more often. keep up the good work.

    Cheers, Jennifer

  • http://www.shadowhillmedia.com Matthew

    I ….. love you. This worked with minimal fuss (and I’m so accustomed to fuss). Thanks for sharing your brains, man. Helped me out a ton!

  • Daniel

    Thanks man! Worked great.

  • http://source-lounge.de Bastian Haustein

    Finally it did not make its way into the release?

    I would strongly appreciate to have that extra functionality as I did implement it several times in a kind of a dirty hack in customer projects.

    Kind regards!

    Bastian

  • http://dashaluna.com dashaluna

    Hello Brad,

    Thanks a lot for the code!

    I’ve got a question however, I hope you would be able to help me out. I had 6 custom image sizes declared with add_image_size which already had all images generated for them. After finding your post I’ve changed all my declarations to bt_add_image_size for custom sizes.

    I have then used AJAX Thumbnail Rebuild plugin to rebuild the images of those custom sizes with the new custom crop location. However, that didn’t seem to work.

    I’ve also used the plugin that you suggested Regenerate Thumbnails However, it outputs an error after 10 successful images.

    How can I make sure that the images of custom size that already had been regenerate are regenerated again using your crop position code? I would hugely appreciate your help!

    Many thanks,
    Dasha

  • NR

    Such a frustrating problem! I have the same question as Dashaluna. Hope to read your reply! Thanks.

  • Jamshed

    this is really helpful for i want something like that crop your images as you want…..

    Many Many Thanks……

    :)

  • http://marieguillaumet.com/ kReEsTaL

    Hi!

    Just to reply to Simon, since I had the same question and found the solution : “is it possible to update thumbnail’s options with this ? Or, as I understand, it’s only for new custom image sizes ?”

    In fact you can use Brad’s bt_add_image_size to create a new size, which will contain the exact same size parameters as your default media settings.

    During the thumbnail creation, WordPress will automatically replace the old, middle-cropped thumbs by the new, top-cropped ones.

    Example : in my Medias settings, the medium size is set to 280×280. Normally you don’t have to add a new size for this since you can set it up directly in the Dashboard.

    However, Brad’s function won’t re-crop the default thumbnail, medium and large image sizes you set up in the Dashboard.

    That’s why, in order to overwrite the default image sizes WordPress generates, I added the following line to my functions.php file:

    bt_add_image_size('medium-thumb', 280, 280, array( 'center', 'top' ));

    Since I want all my medium thumbnails to be 280×280, I simply mimic these settings in a new image size, which will simply overwrite the default 280×280 medium thumbnail generated by WordPress with Brad’s nicely cropped version.

    Of course you can edit the name of this new image size (I’m not sure you should name it “medium”, “thumbnail” nor “large” since they belong to WordPress’s default namespace, pick a genuine name because you don’t want to mess with WordPress’s defaults!), the width, the height, and the crop attributes (it’s the same parameters as in CSS background-position, just like Brad explained in his post).

    Hope this helps :-)

    Thanks a lot, Brad! Too bad WordPress 3.5.1 is out and your patch isn’t part of the core yet.