Search
Close this search box.

Adding Custom Image Sizes to WordPress 3.5 Media Manager

The new media manager in WordPress 3.5 is totally awesome and out-of-the-box allows you to insert three different sizes of image uploads into your posts.

Sometimes however you may need to add images with a specific size into your posts or pages.

Here’s how to add some custom image sizes for use with the WordPress 3.5 Media Manager.

How WordPress Works with Images and Thumbnails

By default WordPress will create a maximum of four copies of every image you upload to the Media Library, in different sizes.

Three of these files (called thumbnails) are sized at 150×150, 300×300, 640×640 pixels respectively with the fourth being the original image you uploaded.

WordPress does this to help serve up images quickly, rather than using processor intensive scripts to dynamically resize a single image.

Yes it can lead to a lot of duplication and addition disk space but space is so cheap nowadays it’s hardly an issue at all.

Thumbnails will be created only up to the size of the original image as there’s no point having a 25×25 icon being blown up to 640×640.

Adding Custom Image Sizes

Enough waffle and onto the juice!

To add custom image sizes to your WordPress website you will need to place the following code in your functions.php file.

[gist id=42bf52b56fc1f58cd48e3351155daffd file=code-snippet-1.php]

Lines 20-27

We start at the bottom of the code and I’ll work my way back up.

Here we set up a function that will add four new thumbnail sizes to our WordPress website.

The function add_image_size() is the one that’s doing the work.  Have a look at the linked codex for an explanation of the parameters and to see how you can configure the way the thumbnails are cropped.

Line 26
Adds a WordPress filter to the filter hook image_size_names_choose which outputs the list of available thumbnail sizes to choose from.

I suggest reading up on WordPress filters if you’ve never heard about them before.

Essentially they allow you to alter the way WordPress outputs something to the screen.

The second parameter to add_filter() is the name of our custom function that we apply to the filter zpd_insert_custom_image_sizes().  More on that in a bit.

Line 28
Calls our zpd_custom_image_setup() function on the after_setup_theme hook.

This lets WordPress get all of the theme processing done and out of the way before you start badgering around with the user interface (UI).

Lines 2 – 18
Defines our filter function zpd_insert_custom_image_sizes().

The code is commented so I won’t run through it line by line here.

Essentially it looks to see if there are any additional thumbnail sizes to add (from add_image_size()) and then appends them to the default list.

Behold – New Image Sizes!

And the result of our hard work is that we get new custom image sizes in our WordPress 3.5 Media Manager (this is our own Media Manager hence the different sizes from the code above in case you were wondering!)

 

Was this article helpful?
YesNo

9 Responses

  1. I have a lot of custom image sizes, but only want to add a few to the editor. How would I specify certain ones using this code?

    1. Hi Amy,

      Copy the code above into your functions.php file and edit the add_image_size functions on lines 22-25 to suit your own image sizes.

  2. Well, I’ve tried this now, and it’s not playing nice. I added the code, and yes, when I upload an image, the additional sizes are there. However, when I update or save the post, I get a white screen on post.php. Going back to my old functions.php, I guess.

  3. I have noticed the the “Attachment Display Settings” are missing from the Media Manager when uploading a image into a custom post type meta box. Any idea why? How can I fix this?