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 :
0000100002000030000400005000060000700008000090001000011000120001300014000150001600017000180001900020/* 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:
000010000200003000040000500006000070000800009000100001100012000130001400015000160001700018000190002000021000220002300024000250002600027000280002900030000310003200033000340003500036000370003800039000400004100042000430004400045000460004700048000490005000051000520005300054000550005600057000580005900060000610006200063000640006500066000670006800069000700007100072"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.