WordPress 3.9 Image Crop Alignment – Part 1

WordPress 3.9 “Smith” was just released and one of the features I’ve been waiting to be integrated is finally here! A patch has been added to the add_image_size function to allow the hard cropping alignment to the image! This makes the development so much easier! The following is all you need to know about image crop alignment.

For a long time we used to rely on the image library timthumb to do such things.

Too often did we have complaints about areas of interest of a photo being cut off (mainly people’s heads getting chopped off) and it was hard to have a 1 size fits all solution.

In this first post, I’ll show you the following about image crop alignment:

1. A few examples and how to declare your crop alignments
2. Show how to call them in your template using the_post_thumbnail() function
3. Regenerate your thumbnails if necessary
4. Touch base on what could be considered a “caveat” on how we can get carried away and bloat our /upload directory pretty easily
5. What’s Next? – Hook up these badboys to meta fields and allow our users to choose any alignment they’d like on a per post basis. 

1. Declare the crop alignment preferences

in your theme’s functions.php file make sure your theme supports featured images by adding post-thumbnail support: add_theme_support( 'post-thumbnails' );

Add image size declaration with crop alignment preferences!

Add your image sizes to your functions.php file in your theme folder. Add as many crop alignment add_image_size declarations as you wish but bare in mind, the more you add, the more images will be created in your /uploads directory. 

//Top Image Alignments
add_image_size( 'archive-left-top', 150, 300, array( left, top ) );
add_image_size( 'archive-center-top', 500, 250, array( center, top ) );
add_image_size( 'archive-right-top', 170, 400, array( right, top ) );

//Center Image Alignments
add_image_size( 'archive-left-center', 400, 200, array( left, center ) );
add_image_size( 'archive-center-center', 600, 200, array( center, center ) );
add_image_size( 'archive-right-center', 400, 200, array( right, center ) );

//Bottom Image Alignments
add_image_size( 'archive-left-bottom', 100, 205, array( left, bottom ) );
add_image_size( 'archive-center-bottom', 500, 100, array( center, bottom ) );
add_image_size( 'archive-right-bottom', 100, 200, array( right, bottom ) );

2. Call the images in your template

Inside of your template where you want to call your page’s/post’s featured image you simply need to call: the_post_thumbnail( 'archive-right-bottom' ); archive-right-bottom being the name you assigned to your add_image_size declaration in your functions.php file. You can name it anything you’d like but I chose to keep the crop alignments in the name for better readability in my templates.

Left Top

In your template: the_post_thumbnail( 'archive-left-top' );

Center Top

In your template: the_post_thumbnail( 'archive-center-top' );

Right Top

In your template: the_post_thumbnail( 'archive-right-top' );

Center Center

In your template: the_post_thumbnail( 'archive-center-center' );

Left Bottom

In your template: the_post_thumbnail( 'archive-left-bottom' );

Center Bottom

In your template: the_post_thumbnail( 'archive-center-bottom' );

Right Bottom

In your template: the_post_thumbnail( 'archive-right-bottom' );

3. Regenerate your thumbnails

If you’ve added the new image_sizes to your functions.php on a production site, you will need to regenerate your site’s thumbnails in order for the new crop aligned image_sizes to be generated. If you haven’t heard of it, we use the very popular Regenerate Thumbnails plugin, I suggest you install and use it as it’s a super easy to use and very handy.

4. /uploads bloat?

One consideration is how carried away we can get with the various crop alignments. Since WordPress natively creates the various thumbnail sizes on image upload this means if we decide to define crop alignments for all possible combinations, that’s 9 additional thumbnails per image that are uploaded on top of the default thumbnail, medium, large etc… For some, and most, this isn’t a big concern, but I felt it was worth mentioning.

5. What’s next?

In our next post we’re going to work with some meta fields and our template files to allow our user’s to choose via a meta option which crop alignment they’d like to display on a per page and per post basis!