How to Create Additional Image Sizes in WordPress

No need to download a plugin to add image sizes to WordPress: there’s a function for that. Whether you need to add different sizes for your portfolio images or simply to have more choices when it comes to your post thumbnails, it’s not that hard to add sizes.

WordPress already comes with four image sizes: thumbnail (150px by 150px), medium (300px by 300px), large (640px by 640px), and full-size (original image resolution). Depending on your theme, you might have a few extra ones already.

How Images Work in WordPress

Whenever you upload a new image to WordPress, it generates resized versions that you can use on your website. That way, you never have to worry about resizing all your images yourself and uploading those versions. WordPress takes care of that for you.

It’s a powerful feature that you should learn to use, as it can save you quite a bit of time when optimizing images for the web.

How to Add Image Sizes to WordPress

To add new image sizes, you’ll need access to your functions.php file.

Before you add sizes, you’ll want to make sure they are supported by copying this line of code:

add_theme_support( 'post-thumbnails' );

Now you are ready to use the add_size_image() function. You’ll need a to use these arguments to make it work properly:

• Name: A string that identifies your image size (required)
• Width: The image sizes in pixels (optional)
• Height: The image sizes in pixels (optional)
• Crop: Define the type of crop or its positioning(optional)

Here are a few examples:

add_size_image ( ‘featured-large’, 1200, 600 ); // Soft Crop add_size_image (‘featured-medium’, 600, 400, true); // Hard Crop add_size_image (‘featured-small’, 300, 200, array( 'left', 'top' ) ); // Hard Crop Left Top

Understanding the Cropping Options

As you’ve seen already, there are two image cropping options: soft crop and hard crop. Because they each have their pros and cons, let’s look at them individually.

Soft Crop/Resizing

The option used by default, soft crop is more of a resizing property than a cropping one. It keeps the proportions of the image, but makes it fit the dimensions you asked for. It has the value of false.

Soft crop works with one or two specified dimensions. If you only specify the width, the image will be as long as it needs to be to keep the proportions. This works great if you have a portfolio and want to keep the width of the images the same, but have the different heights still show.

In case you specify two dimensions, the image will be resized to the first one it hits. Let’s say you are using the featured-large image size above and you upload a picture that is 2000px by 800px. The cropped version would be 1200px by 480px.

If it was the other way around, though, and you had a tall image of 800px by 2000px, the new version would be of 240px by 600px. What you need to remember is that the resized image can’t be bigger than the dimensions specified. So the first one it hits, that’s when the resizing stops.

Hard Crop

Hard cropping will do what soft cropping didn’t: it will cut the image to fit the specified dimensions. The means that the ratio of the new image will be different, and not all of the content will be shown.

You use it by specifying true as the last argument.

The default cropping position is centered, but if you prefer to position the cropping either at the top or one of the corners of your image, you could also specify that. You’ll have to use array ( ‘horizontal-position’, ‘vertical-position’ ). You can use the values left, center, and right for the horizontal positioning and top, center, and bottom for the vertical position.

Displaying the new image sizes

Now that you’ve got your new sizes, it’s time to add them either to your posts as a featured image or to your portfolio. First, you’ll need to find the appropriate PHP file to post your code in, like single.php or single-portfolio.php.

If you are within the Loop, you will need to use this function:

the_post_thumbnail( 'your-custom-size' );

Make sure you change your-custom-size with the name of your new size!

If you want to display one picture in particular, using one of your new sizes, use the following code:

echo wp_get_attachment_image( 42, 'your-custom-size' ); 

You will need to specify your Image ID in that case. To find that, go to your Admin Dashboard > Media. Click on the image you want to find the ID of. It will either take you to another page or open a popup. Check the URL. You should see something like this:

http://yourwebsiteURL.com/wp-admin/upload.php?item=300 or
http://yourwebsiteURL.com/wp-admin/post.php?post=300&action=edit.

300 is your image ID!

Regenerate Thumbnails

The final step, after you added all the sizes you needed, it to use the Regenerate Thumbnails plugin to make sure all your old images have the new versions. This is a powerful tool that will create all the missing versions of your images, so you don’t have to worry about it!

You’re done! You now have awesome new image sizes to use on your WordPress website that fit your needs.