How to Get Perfect Blog Images Every Time with Auto Scale and Crop for WordPress

Wordpress custom image sizes and choicesPlacing images in your posts has several benefits. For one, posts with images are easier to read – photos break up long blocks of text and give context to the story being told. Images also have search engine mojo; and when labeled correctly they can be an important part of how potential visitors find your article and your site.

But, some of the most often cited areas of confusion for new WordPress users are the image uploading and inserting features that are native to post and page editing. Those of us who are accustomed to using sites like Facebook and Twitter know that image uploading is a simple process on those sites. They each have standard image viewers and uploaded files are automatically cropped to fit the site’s default image size. There’s not much work we have to do to get a great looking images on those networks.

Unfortunately, WordPress doesn’t make it so easy, because it gives you almost complete control over placing images, and, in doing so, actually makes it less intuitive for newbies to work with media. The result is often mis-aligned photos, images that bleed into sidebars, or scaled images that distort the original beyond recognition, like the picture shown below.

Image bleed into sidebar Media Settings
Click to view larger image

The good news is, getting your images into your posts and pages doesn’t have to be so hard. In fact, there are two simple ways to accomplish our goal of making image uploading and placement nearly fool-proof:

  1. Install a plugin
  2. Insert 8 simple lines of code

This article will focus on the latter, but if you are not comfortable with changing or adding code to your theme files, you can opt to use the WordPress Image Plugin which adds additional image sizes for you automatically.

If you’re comfortable with a little bit of code (8 lines), then read on and enjoy all the photo goodness WordPress has to offer.

When we’re done, you’ll have added two options to the image uploader and embedder, shown in red below, one which scales your image to a perfect post box fit, and another which crops the image to a consistent size across your WordPress installation. Either option will make it a snap to add a full-width featured image atop your post.

WP Image SIze Tutorial When Finished
Click image to enlarge

The options shown in the blue box are standard WordPress post thumbnail options. A 150 pixel square thumbnail, the 300 pixel square medium picture, the large size width of 1024 pixels, and the full size which defaults to the size of the image being uploaded. A robust offering of image sizes, but not necessarily suited to your blog’s needs or its design.

If you upload an image that doesn’t exactly fit your blog’s width you will need to use the image editor inside WordPress to force the image to fit. This is the part of the process that confuses most people because WordPress’ image editing screen, while well documented, is not very user-friendly. And that’s what our tutorial aims to change.

Resources for this Tutorial

Before we start, there are a few resources you should have handy that will help make this a quick process. With these resources, this fix should take no more than five minutes to achieve.

  • Browser Debugger / Inspector – Each browser has an extension or built-in debugger. Firefox has something called Firebug, chrome has Inspector, and Internet Explorer has Developer Tools. These items help you view website markup right in your browser. Debuggers are to developers what hoses are to firemen – the first line of defense.
  • Code Editor – A good code editor is a necessity if you plan to do any theme editing. There are many on the market, both free and premium, and even more articles out there about which one is best. I use Coda for mac, a premium editor, but there are several free resources including Netbeans, Notepad ++, and TextWrangler.
  • FTP Program – You’ll need one of these to upload and download files to your server where the WordPress installation lives. Most of the good ones are free, including Cyberduck for Mac or FileZilla, which works on Mac and PC. If you use a premium code editor, chances are it will include a FTP program too.
This tutorial doesn’t cover the ins and outs of using these resources, rather it assumes you have at least rudimentary skills on each. If not, I would suggest using the plugin mentioned above to accomplish the photo editing goal, or spend some time with these resources before working on this tutorial.

Determining Your Content Column Width

The key to uploading and placing images that fit within your posts is a good understanding of your content column widths. This setting will be the limiting factor for your post images, as any image with a size that exceeds the post box width will extend out of the post box and overlap your sidebar content.

There are several ways to go about finding your column widths.

Theme Options

The easiest method is to check in your theme options. Most themes will include this as a basic setting. You’ll want to navigate to that area and make note of the post box width.

Theme Editor

The most cumbersome method to find out post box width would be to sift through code inside your theme files using the code editor or built-in WordPress theme editor to find CSS selectors for post_box, content_box, and sidebar. I do not recommend using this method because any errant change in the theme file could cause major instability in your theme or even cause it to break.

Inspector

The next method, and in my opinion – the easiest method, is to use your browser debugger to view the code of your site. I’m using Chrome’s built-in inspector on a Mac for this tutorial, and the video below shows you how to find your post box and content column widths. Firebug works in a similar manner as does IE’s developer tools.

Creating the Custom Image Size Code

Once you understand how wide your post box is, you can determine what standard image you want on your site. I prefer images that span the entire post box width, that is the space from left text margin to right text margin – that way the image is perfectly aligned with the readable text. It looks clean that way, and makes the image pop.

In the video example, my test site has a post box width of 634 pixels, with a left margin of 11 pixels and a right margin of 22 pixels. That means the actual text spans 600 pixels (634-11-22 = 600 pixels). This is the width to which I will set my custom image size.

Your post box might be 500 pixels wide, in which case you’ll modify the code we show below to fit your content. Also, you might not want your image to span the whole post box – that’s a personal preference. You may choose to create a custom image size that is exactly one-half the width of the post box. Using our example above, you would set your custom image size to 300 pixels, since the post box width is 600 pixels. You might also think about right or left justifying your images which do no take up the entire post box width. That will make them fit better with your text and look cleaner.

Armed with information about site’s content columns you can create the custom image size code and include it in your theme files. In particular we’ll be editing the functions.php file which is typically found in your theme directory. That directory will look something like this: http://example.com/wp-content/themes/yourthemenamehere/functions.php.

If you use a custom WordPress framework, like Thesis or Genesis, you’ll probably use a separate file like a custom_functions file. This code will go in that file.

First, we’ll make sure your theme is making use of the native WordPress image functionality. To do that, you’ll check within your post editor.

Adding WordPress Post Thumbnail Support

Navigate to the Post section of the admin area of WordPress. Create a new post or edit an existing post. If you see an area called “Featured Image” you are all set. Note: you may need to modify your screen viewing options to view this section.

If you do not see the featured image area, chances are post thumbnail support has not been added to your theme. This is an easy fix with the following code – added to your functions.php file or custom functions file.

1
add_theme_support( 'post-thumbnails' );

This adds functionality a representative image for Posts, Pages or Custom Post Types. How that image is actually displayed is up to the individual theme, and also the root cause of the confusion surrounding image placement mentioned in the beginning of this post.

To combat that, we’re going to create a custom image size that is tailored to our own theme, and this is where the post box width research comes in. Here, we’ll use some code to create a new post image size by adding the following to your functions.php file:

1
add_image_size( 'full-width', WIDTH, HEIGHT);

Don’t input this code exactly as you see it here. Instead, you’ll replace the capital letters with your own values. Width should be set as the post box width we found earlier. Height can be anything you like that fits well with your page. It can also be set to 9999 to allow images of any height to be added. Crop is either true or false. WordPress defaults to false, so if you don’t want to hard crop your image to the size specified you can just leave this selector off. If you want to crop your image to the exact size specified with the height and width tags, you’ll enter “true” for crop mode. More on cropping in just a moment.

Here are examples of each setting. In both cases I used the same image uploaded into WordPress with original dimensions of 3504 x 2336.

Custom Image Re-Scaling

1
add_image_size( 'full-width-ratio', 600, 9999 );

This adds an image size called “full width ratio” with a width of 600 pixels and an unlimited height. It is not set to crop, (default is false – notice nothing comes after height value of 9999) which means WordPress will automatically resize the image according to its original aspect ratio and to the dimension which is more limiting. Here, we know our post box has a width of 600 pixels, which is why we used that number in the first place, so the full width ratio size will place an image in our post that takes up the full width of the post box – 600 pixels.

As you can see in the image below, the picture maintains its original aspect ratio and is scaled down to 600 pixels wide, which requires a height of 400 pixels. Thus the image placed in our post is 600 x 400 pixels.

Custom Image sizes in WordPress Scaled
Click image for larger view

Custom Image Cropping

If you want a specific image size to be consistent across every post you’ll want to use the crop functionality, which is done like this:

1
add_image_size( 'full-width-crop', 600, 300, true );

This code sets the image width to 600 pixels wide and 300 pixels high and crops larger images to that exact specification after an initial aspect ratio re-scale.

Using the same image from the previous example, with no crop, the image scaled to a width of 600 pixels wants a height of 400 pixels, but we’ve told WordPress to do a hard crop at 300 pixels in height. Therefore, WordPress wants to crop off 100 pixels, which it takes from the top and bottom of the image as shown below.

Click image for larger view

Notice the blue circle around the water bottle at the bottom right. In the first picture, the bottle is fully visibly because the image is just scaled, not cropped. But, in the second image the bottle is part of the area that gets cropped off, and therefore doesn’t fully display.

The same goes for the round light on the wall just above the woman with the red jacket. There is room above the light in the first picture, but in the second picture the image was cropped hard at the light. Basically, the second photo loses approximately 50 pixels from the top and the bottom – making up that 100 pixel difference in image height.

Consequences of Scaling or Cropping Images in WordPress

There are advantages and disadvantages to each of these methods. Using a hard crop with your images will help give your site a more consistent look because the image will always be the same size – in our example 600 x 300. But you may lose parts of your image to the crop depending on the aspect ratio of the original image. When using original images with dimensions that are close to your WordPress image size settings there will be less cropping, if any at all.

 

Call the Custom Image Size in a Custom Function

Just creating the custom image size isn’t going to include it in your theme or media uploader, so don’t be surprised if you are following along with this tutorial but don’t see anything yet in your own WordPress installation.

The next step is to add the following lines of code to the functions.php file – right below the other code we added:

1
2
3
4
5
function custom_in_post_images( $args ) {
 $custom_images = array('full-width-ratio' => 'Full Width Ratio', 'full-width-crop' => 'Full Width Crop');
 return array_merge( $args, $custom_images );
 }
 add_filter( 'image_size_names_choose', 'custom_in_post_images' );

Here’s what this snippet of code is doing:

The first line opens a custom function. This is standard php code. It also passes a variable called $args (short for arguments). It doesn’t need to be called $args, it can be anything really -just make sure it tracks through the lines below it, and doesn’t use a name already reserved by WordPress or used somewhere else in the functions.php file.

The second line creates another variable $custom_images and sets it equal to an array which includes the two custom image sizes we created, the full width crop and full width ratio. The term before the comma in each section is the actual image name we created in the first step of code earlier. The term in quotes after the comma is the choice we will see inside the media uploader on our image editing and inserting screen of the WordPress post editor.

The next line of code merges the variable we created into our $args variable, and the final line of code uses a standard WordPress filter to add our function to the image choices we see in the post editor.

For convenience, here’s the full section of code we’ve added – all together:

1
2
3
4
add_theme_support( 'post-thumbnails' );
add_image_size( 'full-width-ratio', 600, 9999 );
add_image_size( 'full-width-crop', 600, 300, true );
function custom_in_post_images( $args ) { $custom_images = array('full-width-ratio' => 'Full Width Ratio', 'full-width-crop' => 'Full Width Crop'); return array_merge( $args, $custom_images ); } add_filter( 'image_size_names_choose', 'custom_in_post_images' );

Save your functions.php file, upload it to the correct directory using your ftp program and then navigate to a new post in your admin panel. When you upload an image and it shows you choices of sizes to insert into your blog, you’ll see the two sizes we added along with dimensions for each one.

WP Image SIze Tutorial When Finished
Click image to enlarge

If you don’t see choices like those in the red box shown above you missed a step somewhere. Retrace through the code and make sure there aren’t any punctuation mistakes.

Have Fun. Explore.

If you want to add more custom image sizes you can continue inserting them into the functions php file. If your blog content column width stays constant during your time as a blogger your images will always look great. If you change themes or content widths you’ll want to go back in and adjust these settings from time to time.