Blog

Image Crop Position in WordPress

March 12, 2014 Update: Great news! My core patch has been rolled into WordPress 3.9. No need to mess with any of the code below.

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.

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

  • tiaurus

    Thanks for the code!
    And just as the cut, do not reduce the image size? I want this:
    - Determine the size of thumbnails
    - Set position
    - Cut out part of the original image and use the cut-out portion as thumbnails
    / * Sorry for my bad English * /

  • Pingback: Crop Wordpress post thumbnails from the top | JohnAspinall.co.uk

  • http://kenthhagstrom.se/ Kenth Hagström

    I love this piece of code, had some issues with it though, the “set featured image” does not always work when this code is included in my theme, have not figured out why, yet. However, awesome work! :)

  • Pingback: Crop and Resize images in WordPress: how to change cropping origin? | HolaRails

  • Jonathan

    Hi,
    I just tried to use add_image_size( ‘screenshot’, 580, 422, array( ‘left’, ‘top’ ) );
    in WordPress 3.8.1 and it works!
    It would be nice for others if you could update the post to tell people that it finally arrived in the core ;-)

  • Jonathan

    Ah no, damn sorry it doesn´t work :-( I just thought it was for a moment
    because it also didn´t throws any error….
    So I tried your code and it works but when first uploading it shows that there was an error uploading the image. Then I have to reload and it´s there, also with the cropped from top image. Maybe there is a simple fix for the error to dissappear?

  • Guillaume

    I like your patch, thanks :)

  • Funkyphenix

    Thank you man! Works like a charm ^_^

  • http://bradt.ca/ Brad Touesnard

    Great news! My core patch has been rolled into WordPress 3.9 which is now in beta: http://wordpress.org/news/2014/03/wordpress-3-9-beta-1/

  • Jonathan

    I can’t find anything about that in your link :-/ Am I blind?

  • Ben Racicot

    Nice Brad! This is a major upgrade for add_image_size. Will you be updating the codex page for us? I’ll be watching it.

  • Eben

    I can’t believe it took so long to get in, oh well all good things take time.

    Great work, thanks.

  • ThinkStyleStudio

    I can’t say I’m not looking forward to this. It’s been annoying to have to hack this together up till now.

  • Miranda

    So excited when I saw this in the notes for 3.9! Man, it took them long enough, but glad to see it’s finally been added!

  • Vadims

    Well done mate!

  • Mister

    Use the suggested rebuild plugin, the ajax one won’t take the position into account.

  • http://wpsites.net/ Brad Dalton

    Good stuff! Only took 3 years!