Featured images have become an important part of WordPress since they were first released with WordPress 2.9. Some articles and tutorials might also refer to them as post thumbnails, but they mean the same thing.
If you are unfamiliar with featured images, read the linked tutorial to quickly learn all the basics of featured images. While the linked article provides an overview of featured images for beginners, this tutorial will cover the programming aspect.
This tutorial will show you how to get and set the size of featured images in WordPress. If you want to learn how to get the featured image or its ID for a particular post and check if a post even has a featured image, you should read my post titled How to Get the Featured Image in WordPress.
Understanding Various Image Sizes in WordPress
Images form an important part of websites and help in making a page more lively and interesting. However, they can also add a considerable amount of extra data that users need to download to view a page. Things can get even worse when you are using a single size of an image to display on all devices, large and small.
Luckily, WordPress automates the creation of images of different sizes for you so that you can optimize the content delivery for different viewers. I have covered this topic in detail in the tutorial about changing featured image sizes in WordPress.
In short, WordPress has multiple image sizes and one such default image size is called Thumbnail. The dimensions for this image size are available from the WordPress admin dashboard by navigating to Settings > Media.
The default Thumbnail image size is different from another image size called post-thumbnail, which gets registered whenever a theme adds support for featured images.
The focus of discussion in this tutorial is going to be the post-thumbnail size, and we will learn how to get and set its value.
How to Set the WordPress Featured Image Size
You will most likely want the size of your featured images to be consistent. One easy way to achieve this is with the help of the set_post_thumbnail_size() function. The function accepts three parameters: width, height, and an optional boolean value specifying whether you want to crop the images or resize them. This is set to false by default, which means that images will be resized.
The following line instructs WordPress to create image thumbnails that are 1200 px wide and 628 px tall with resizing.
1 |
set_post_thumbnail_size(1200, 628); |
Keep in mind that images will be resized to be exactly 1200 px and 628 px wide only if they have the same aspect ratio. Otherwise, they will be resized to either have a matching width or a matching height, depending again on the aspect ratio.
Let's say that you don't care about the images getting cropped, but they always need to be 1200 px wide and 628 px tall when used as featured images. In that case, you can set the third parameter to be true.
1 |
set_post_thumbnail_size(1200, 628, true); |
All your featured images will now be cropped to be exactly 1200 px wide and 628 px tall.
The set_post_thumbnail_size() function uses the add_image_size() function behind the scenes to register an image size for the post thumbnail. If you want to register any additional image sizes, you should consider using the add_image_size() function.
Adding this function call to your functions.php file will not result in resizing of any existing featured images. You will have to use a thumbnail regeneration plugin to achieve that. Also, a smaller image will not be upscaled to the featured image dimensions that you specified.
How to Get the WordPress Featured Image Size
Let's say you want to find out the currently registered size for featured images to see if it is what you expect. How do you do that?
WordPress offers us multiple functions to get all this information. I will mention them here briefly.
The get_intermediate_image_sizes() function is useful for anyone who just wants a list of different registered image sizes. This won't give you any other information about the image sizes. Here is its output for my website:
1 |
Array
|
2 |
(
|
3 |
[0] => thumbnail |
4 |
[1] => medium |
5 |
[2] => medium_large |
6 |
[3] => large |
7 |
[4] => 1536x1536 |
8 |
[5] => 2048x2048 |
9 |
[6] => post-thumbnail |
10 |
[7] => woocommerce_thumbnail |
11 |
[8] => woocommerce_single |
12 |
[9] => woocommerce_gallery_thumbnail |
13 |
)
|
The wp_get_additional_image_sizes() function shows you information related to all other registered image sizes besides thumbnail, medium, medium_large, and large. This function returns an associative array of arrays, with information such as the width, height, and cropping for the registered image sizes. Here is the output of this function for me:
1 |
Array
|
2 |
(
|
3 |
[1536x1536] => Array |
4 |
(
|
5 |
[width] => 1536 |
6 |
[height] => 1536 |
7 |
[crop] => |
8 |
)
|
9 |
|
10 |
[2048x2048] => Array |
11 |
(
|
12 |
[width] => 2048 |
13 |
[height] => 2048 |
14 |
[crop] => |
15 |
)
|
16 |
|
17 |
[post-thumbnail] => Array |
18 |
(
|
19 |
[width] => 1200 |
20 |
[height] => 628 |
21 |
[crop] => 1 |
22 |
)
|
23 |
|
24 |
[woocommerce_thumbnail] => Array |
25 |
(
|
26 |
[width] => 324 |
27 |
[height] => 324 |
28 |
[crop] => 1 |
29 |
)
|
30 |
|
31 |
[woocommerce_single] => Array |
32 |
(
|
33 |
[width] => 416 |
34 |
[height] => 0 |
35 |
[crop] => 0 |
36 |
)
|
37 |
|
38 |
[woocommerce_gallery_thumbnail] => Array |
39 |
(
|
40 |
[width] => 100 |
41 |
[height] => 100 |
42 |
[crop] => 1 |
43 |
)
|
44 |
|
45 |
)
|
You can see the post-thumbnail size that I registered in the above output. It also has crop set to 1, which means that the thumbnails will be cropped instead of resized.
Let's say you want information about all the registered image sizes for a WordPress website. The wp_get_registered_image_subsizes() function is your best bet in that case. Here is my output with a call to this function:
1 |
Array
|
2 |
(
|
3 |
[thumbnail] => Array |
4 |
(
|
5 |
[width] => 180 |
6 |
[height] => 180 |
7 |
[crop] => |
8 |
)
|
9 |
|
10 |
[medium] => Array |
11 |
(
|
12 |
[width] => 420 |
13 |
[height] => 420 |
14 |
[crop] => |
15 |
)
|
16 |
|
17 |
[medium_large] => Array |
18 |
(
|
19 |
[width] => 768 |
20 |
[height] => 0 |
21 |
[crop] => |
22 |
)
|
23 |
|
24 |
[large] => Array |
25 |
(
|
26 |
[width] => 1024 |
27 |
[height] => 1024 |
28 |
[crop] => |
29 |
)
|
30 |
|
31 |
[1536x1536] => Array |
32 |
(
|
33 |
[width] => 1536 |
34 |
[height] => 1536 |
35 |
[crop] => |
36 |
)
|
37 |
|
38 |
[2048x2048] => Array |
39 |
(
|
40 |
[width] => 2048 |
41 |
[height] => 2048 |
42 |
[crop] => |
43 |
)
|
44 |
|
45 |
[post-thumbnail] => Array |
46 |
(
|
47 |
[width] => 1200 |
48 |
[height] => 628 |
49 |
[crop] => 1 |
50 |
)
|
51 |
|
52 |
[woocommerce_thumbnail] => Array |
53 |
(
|
54 |
[width] => 324 |
55 |
[height] => 324 |
56 |
[crop] => 1 |
57 |
)
|
58 |
|
59 |
[woocommerce_single] => Array |
60 |
(
|
61 |
[width] => 416 |
62 |
[height] => 0 |
63 |
[crop] => |
64 |
)
|
65 |
|
66 |
[woocommerce_gallery_thumbnail] => Array |
67 |
(
|
68 |
[width] => 100 |
69 |
[height] => 100 |
70 |
[crop] => 1 |
71 |
)
|
72 |
|
73 |
)
|
This gives you all the information that you might need about registered image sizes in WordPress, including the featured image size signified by the post-thumbnail key.
Styling Featured Images
Some theme developers might want to style featured images differently than regular images. WordPress makes it incredibly easy for us to differentiate between the two with CSS selectors.
Any featured image that you output on the website will have a class named wp-post-image already applied to it. The image will also have some other optional classes added to it, like size-post-thumbnail or size-large, depending on the size that you requested for the featured image.
This allows you to target featured images of a specific size and apply styles accordingly.
Final Thoughts
This tutorial covered everything that you need to know about getting or setting the size of featured images in any WordPress installation. You should now be able to specify exactly what size you want your featured images to be and then style those images based on the specific classes applied to them.
