Advertisement
  1. Code
  2. WordPress

How to Get and Set Featured Image Sizes in Your WordPress Theme?

Scroll to top
Read Time: 7 min

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 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 or 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.

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 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 1200px wide and 628px tall with resizing.

1
set_post_thumbnail_size(1200, 628);

Keep in mind that images will be resized to be exactly 1200px and 628px 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 1200px wide and 628px 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 1200px wide and 628px 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.

One more thing that I would like to add is that adding this function call to your functions.php file will not result in resizing of any existing featured images. You will have to use some thumbnail regeneration plugin to achieve that. Also, a smaller image will not be up-scaled to the featured image dimensions that you specified.

Lets 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 being 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.

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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.