WP Rest API + AngularJS : How to grab Featured Image for display on page?

Question

I am accessing Wordpress data through an HTTP REST API plugin (this wordpress plugin: http://v2.wp-api.org/). I know how to grab my post title, but how do I display the feat

Answer 1

To get featured images response, please add _embed on the query string. example:

http://demo.wp-api.org/wp-json/wp/v2/posts/?_embed

Then, access the featured images in returned JSON response using _embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('Ctrl', function($http, $scope) {
        $http.get("http://ogmda.com/wp/wp-json/wp/v2/posts?_embed").success(function(data) {
        $scope.posts = data;

        var firstFeaturedImageUrl = $scope.posts[0]._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
    });
});

Answer 2

You can replace <p>{{ post.featured_image }}</p> with this <img ng-src="{{post.better_featured_image.source_url}}" />

Answer 3

A better way would be to integrate the URL of the featured image into the json response so that you get it all in a single request. You can add the following code (inside your-theme/functions.php) to achieve this:

//Get image URL
function get_thumbnail_url($post){
    if(has_post_thumbnail($post['id'])){
        $imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post['id'] ), 'full' ); // replace 'full' with 'thumbnail' to get a thumbnail
        $imgURL = $imgArray[0];
        return $imgURL;
    } else {
        return false;
    }
}
//integrate with WP-REST-API
function insert_thumbnail_url() {
     register_rest_field( 'post',
                          'featured_image',  //key-name in json response
                           array(
                             'get_callback'    => 'get_thumbnail_url',
                             'update_callback' => null,
                             'schema'          => null,
                             )
                         );
     }
//register action
add_action( 'rest_api_init', 'insert_thumbnail_url' );

Then in your view, you can use {{ post.featured_image }}

Note: To get the same image in different sizes, use above wp_get_attachment_image_src function that accepts any valid image size, or an array of width and height values in pixels as its second parameter.

Answer 4

I found a very easy way to do this.

Just download the new Wordpress plugin called Better Rest API Featured Image.This plugin adds a better_featured_image field to the post object that contains the available image sizes and urls, allowing you to get this information without making a second request.