WordPress API | Get Featured Image URL

Today i was made some experiment with WordPress REST API, all it’s right till i want do get Feateured image URL.
By default wordpress expose Feature image ID instead of URL in API.

00001
"featured_media": 25,

That’s is problem, because, for fetch post you need to do two call, first for get the single post API and one for get single post featured image form “featured_media” ID.

It’s more practise have Feature Image Url ( and links ) exposed in API.
For do that, open the function.php of your theme and add this snippet :

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
/* Add featured image to REST API */
 
add_action('rest_api_init', 'register_rest_images' );
function register_rest_images(){
    register_rest_field( array('post'),
        'fimg_url',
        array(
            'get_callback'    => 'get_rest_featured_image',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}
function get_rest_featured_image( $object, $field_name, $request ) {
    if( $object['featured_media'] ){
        $img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );
        return $img[0];
    }
    return false;
}

Basically we go to add “fimg_url” directly to wordpress API.

reload post end point and you see something like this:

00001
00002
00003
00004
00005
00006
00007
00008
00009
00010
00011
00012
00013
00014
00015
00016
00017
00018
00019
00020
00021
00022
00023
00024
00025
00026
00027
00028
00029
00030
00031
00032
00033
00034
00035
00036
00037
00038
00039
00040
00041
00042
00043
00044
00045
00046
00047
00048
00049
00050
00051
00052
00053
00054
00055
00056
00057
00058
00059
00060
00061
00062
00063
00064
00065
00066
00067
00068
00069
00070
00071
00072
"fimg_url": "http://localhost/wpTest/wp-content/uploads/2019/12/847d7f84606089.5d62962644b12.jpg",
        "_links": {
            "self": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts/64"
                }
            ],
            "collection": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts"
                }
            ],
            "about": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/types/post"
                }
            ],
            "author": [
                {
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/users/1"
                }
            ],
            "replies": [
                {
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/comments?post=64"
                }
            ],
            "version-history": [
                {
                    "count": 15,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts/64/revisions"
                }
            ],
            "predecessor-version": [
                {
                    "id": 92,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/posts/64/revisions/92"
                }
            ],
            "wp:featuredmedia": [
                {
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/media/25"
                }
            ],
            "wp:attachment": [
                {
                    "href": "http://localhost/wpTest/wp-json/wp/v2/media?parent=64"
                }
            ],
            "wp:term": [
                {
                    "taxonomy": "category",
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/categories?post=64"
                },
                {
                    "taxonomy": "post_tag",
                    "embeddable": true,
                    "href": "http://localhost/wpTest/wp-json/wp/v2/tags?post=64"
                }
            ],
            "curies": [
                {
                    "name": "wp",
                    "href": "https://api.w.org/{rel}",
                    "templated": true
                }
            ]
        }

From now you can call featured image as:

00001
<img class="img-fluid" src="post.fimg_url" />;

That’s all.