Featured images have become a big part of WordPress since they were first released in WordPress 2.9. Some articles and tutorials might also refer to them as Post Thumbnails but they mean the same thing.
If you’re not familiar with featured images, read the linked tutorial to quickly learn all the basics of featured images. While the linked article provides an overview of the featured images for starters, 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 know how to get the featured image or its id for a particular post and check if a post also has a featured image, you should read my post titled How to get the featured image in WordPress.
Understanding the various image sizes in WordPress
Images form an important part of websites and help make a page more lively and interesting. However, they can also add a significant amount of extra data that users need to download to view a page. Things can get even worse when you use a single size of an image to display on all devices big and small.
Fortunately, WordPress automates the creation of different images or sizes for you so that you can optimize content delivery for different viewers. I covered this topic in detail in the tutorial on Changing the Size of Featured Images in WordPress.
In short, WordPress has multiple image sizes and one of these is called the default image size Thumbnail. The dimensions for this image size are available from your WordPress admin dashboard by navigating to Settings > Media.
The default Thumbnail image size is different from another called image size post-miniature which is logged whenever a theme adds support for featured images.
The focus of the discussion in this tutorial will be the post-miniature size and we will learn how to get and set its value.
How to set the size of the WordPress featured image
You will most likely want the size of your featured images to be consistent. An easy way to achieve this is with the help of set_post_thumbnail_size() function. The function takes three parameters: width, height, and an optional boolean value that specifies whether you want to crop or resize the images. This is set to false by default, which means the images will be resized.
The following line instructs WordPress to create image thumbnails 1200px wide and 628px high with scaling.
1 |
set_post_thumbnail_size(1200, 628); |
Note that images will only scale to be exactly 1200px and 628px wide if they have the same aspect ratio. If not, they will be resized to have a matching width or a matching height depending on the aspect ratio.
Let’s say you don’t care about images being cropped, but they should always be 1200px wide and 628px high when used as featured images. If so, you can set the third parameter to be true.
1 |
set_post_thumbnail_size(1200, 628, true); |
All of your featured images will now be cropped to be exactly 1200px wide and 628px tall.
The set_post_thumbnail_size() the function uses the add_image_size() behind the scenes feature to record an image size for the post thumbnail. If you want to record additional image dimensions, you should consider using add_image_size() function.
One more thing I would like to add is that adding this function call to your functions.php file will not scale any existing featured images. You will need to use a thumbnail regeneration plugin to achieve this. Also, a smaller image will not be enlarged to the specified foreground image size.
How to get the size of the WordPress featured image
Let’s say you want to find out the currently recorded size for the foreground images to see if that’s what you expect. How do you do it?
WordPress offers us multiple functions to get all this information. I will mention them here briefly.
The get_intermediate_image_sizes() the feature is useful for anyone who just wants a list of different recorded image sizes. This will not give you any other information about the size of the image. 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() The function also displays information about all other recorded image sizes thumbnail, medium, medium large And large. This function returns an associative array of arrays with information such as width, height and crop for the recorded image size. 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 which I logged in the above output. It also has crop set to 1, which means thumbnails will be cropped instead of resized.
Let’s say you want information about all image sizes registered for a WordPress website. The wp_get_registered_image_subsizes() the function is the best solution 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 you might need about the sizes of images registered in WordPress, including the size of the featured image indicated by post-thumbnail key.
Featured image style
Some theme developers may want to style their featured images differently than regular images. WordPress makes it incredibly easy for us to distinguish between the two with CSS selectors.
Any featured image you produce on the website will have a named class wp-post-image already applied to it. The image will also have some other optional classes added like size-post-thumbnail or size-large. depending on the size required for the featured image.
This allows you to target featured images of a specific size and apply styles accordingly.
Final thoughts
This tutorial has covered everything you need to know about how to get or set 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 shape those images according to the specific classes applied to them.
