Creating New Image Sizes

WordPress makes several different sizes of every image that gets uploaded, but what if you want some new, custom sizes? Here’s a really simple way to add them with code!

Learning outcomes

1. Know what the default image sizes are in WordPress.
2. Understand how to create new image sizes.

Comprehension questions

1. What are the default image sizes in WordPress?
2. How many custom image sizes can be made?

Transcript

0:01
Hey folks, welcome to another HeroPress Tip of the Week. This week we’re going to talk about how to add new image sizes to WordPress.

0:10
By default, when you upload an image, WordPress keeps the original and makes several new sizes.

0:16
And we’re looking right here at the settings page in WordPress under ‘Media’. And here you can decide what size your thumbnail, medium, and large sizes are.

0:28
You’ll note that thumbnails, you have the option to crop them to be completely square. Otherwise, it will go to the first dimension that meets this number.

0:38
So you could have one that’s 300, wide and 600, tall, or 300, tall, and 500 wide. So you can easily change these here.

0:50
But what if you want another one, what if you need all three of these and you need another one or another five, I’m going to show you how to make that you’re not allowed to reuse the names of these, you could change these programmatically.

1:06
But if you’re going to make a new one, you have to give it a new name. There are plugins that let you make these, I’ve never found one that I really liked.

1:15
And it’s so easy to do with code that I’m just going to show you how to use a function called add_image_size. It wants a name, width and height and whether or not to crop it.

1:26
And that’s kind of all there is to it.

1:30
The cropping can get a little confusing. So there is a link right here. This is the docs page on developer.wordpress.org.

1:40
That goes to this page, which shows you what different crop commands do.

1:47
So soft crop, you put in ‘false’ here, and you tell it 200 by 200, you’ll end up with this kind, however, you put it in hard crop ‘true’, and say 200 or 200, you’re going to end up with this kind of thing.

2:01
You can also put in an array. And you can say things like crop 200 or 200. But start in the top left instead of the center, that sort of thing.

2:11
So you can get a lot of options here. I recommend reading through this, you might need to experiment a little bit as you’re making new images.

2:24
So I’m going to show you how to make a new one. There’s some excellent code right on this page. This is good right here. So I’m going to grab that. Then before we get started, I’m going to show you I have these images uploaded this one is 1376 by 1032.

2:52
This was 2560 by 1440, 1920 by 960, 1920 by 1280, and 1024 by 768. So we’re gonna make a new one that is 800 wide by 600 tall. And let’s get creative.

3:15
Let’s do 800 by 400. And we will not crop first. So I’m going to go…I have Pluginception installed. So I’m going to create a new plugin and call it ‘Topher’s Image Sizes’. And version 1.0. Author Topher, we’ll just run with that. There we go.

3:49
So I’m pasting in the code that I took from the docs. So let’s look at what’s going on here.

3:59
There’s a function and it’s called ‘wp_docs_theme_ setup’ I’m going to call it to tophers_image_sizes and that’s unlikely to get stepped on by somebody else.

4:17
So tha’s that in there…then theexample here is making two image sizes 300 wide with unlimited height, and then 220 by 180 cropped. I don’t want that.

4:34
I’m going to call mine topher800. We’ll make it 800 wide. And I said earlier 400 But we’ll just leave it at 800 like this.

4:54
So then there’s an add_action that runs after theme setup. And it just runs this function and adds those image sizes. And that’s all there is to it.

5:04
So we’ll hit ‘Update file’. Now, something very important to note is that did not do anything to the images I already have uploaded. You can actually see them here on my file system.

5:18
There’s the 150 by 150. There’s one that is…come on Mac OS, you can do it…there we go. 300 by 225, 760 by 576, and 1024 by 768. And then there’s full size, which was 376 by 1032.

5:43
So I don’t have new ones. If you want new ones, you need to install a plugin called Regenerate Thumbnails.

5:51
And it’s on the WordPress.org repository. It was created by Alex Mills, who’s no longer with us. But it still has a million active installations.

6:12
So you’re going to activate and now you’re going to use it in a couple of different ways. You can go to ‘Tools’ and ‘Regenerate Thumbnails’, it’ll just regenerate all of them, you’ll actually go into the ‘Media Library’, and click Regenerate Thumbnails right here and do just one image.

6:31
So let’s do that first. So it tells me that it’s not going to do these four that already exists, but it’s going to create these or no, it’s not going to create these new ones, because it would be larger than the original.

6:48
So let’s hit ‘regenerate thumbnails’. And it made one new one topher800. And now we can come over here and there it is 800 by 600.

7:09
Let me show you what it looks like if you do all of them. Here you have the option to delete thumbnail files for old unregistered sizes.

7:19
So if I went into my code and deleted my 800 add_image_size and rerun it, it would delete all those images which is kind of handy.

7:27
So I went to regenerate for all five…and there we go. And now you can see there’s an 800 for this one.

7:39
There’s an 800 for this one, etc. Now you have new images that you can use in your template tags.

7:49
Next week I’ll show you how to be able to access them in your WordPress menus.

7:54
I hope you find it useful.