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.
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.
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.
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!)