I’ve installed the WordPress REST API plugin on a blog and I want to use it to pull content from the blog posts into a panel window within another website. Text content is fine, but I’m not sure about getting the “Featured image” URL. I want the URL so I can store it within a variable and then use it as the background image CSS of the panel (that displays blog data in the panel window of the NON-WORDPRESS site).
Here is an example of the data feed that is returned (just the first entry):
[{
"id": 15470,
"date": "2015-05-21T15:56:31",
"date_gmt": "2015-05-21T05:56:31",
"guid": {
"rendered": "http://blog2.slq.qld.gov.au/jol/?p=15470"
},
"modified": "2016-06-06T10:01:53",
"modified_gmt": "2016-06-06T00:01:53",
"slug": "test-post-3",
"type": "post",
"link": "http://blog2.slq.qld.gov.au/jol/2015/05/21/test-post-3/",
"title": {
"rendered": "test post"
},
"content": {
"rendered": "<p>[slideshow_deploy id=’15471′]</p>n<p>WP REST API plugins is great for getting your blog content out into another website.</p>n<div id="attachment_15405" style="width: 160px" class="wp-caption alignleft"><a href="http://blog2.slq.qld.gov.au/jol/files/2014/08/Hotel-Metropole-Thursday-Island-1897.jpg" rel="attachment wp-att-15405"><img class="size-thumbnail wp-image-15405" src="http://blog2.slq.qld.gov.au/jol/files/2014/08/Hotel-Metropole-Thursday-Island-1897-150x150.jpg" alt="Hotel Metropole, Thursday Island, 1897" width="150" height="150" /></a><p class="wp-caption-text">Hotel Metropole, Thursday Island, 1897</p></div>n"
},
"excerpt": {
"rendered": "<p>[slideshow_deploy id=’15471′] WP REST API plugins is great for getting your blog content out into another website.</p>n"
},
"author": 11,
"featured_media": 15392,
"comment_status": "open",
"ping_status": "open",
"sticky": false,
"format": "standard",
"categories": [1],
"tags": [],
"_links": {
"self": [{
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/posts/15470"
}],
"collection": [{
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/posts"
}],
"about": [{
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/types/post"
}],
"author": [{
"embeddable": true,
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/users/11"
}],
"replies": [{
"embeddable": true,
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/comments?post=15470"
}],
"version-history": [{
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/posts/15470/revisions"
}],
"https://api.w.org/featuredmedia": [{
"embeddable": true,
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/media/15392"
}],
"https://api.w.org/attachment": [{
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/media?parent=15470"
}],
"https://api.w.org/term": [{
"taxonomy": "category",
"embeddable": true,
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/categories?post=15470"
}, {
"taxonomy": "post_tag",
"embeddable": true,
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/tags?post=15470"
}]
}
}]
Now I can see the entry for the featured image being:
"featured_media": 15392,
Then further down below under the ‘_links’ object there is these several lines:
"https://api.w.org/featuredmedia": [{
"embeddable": true,
"href": "http://blog2.slq.qld.gov.au/jol/wp-json/wp/v2/media/15392"
}],
When I try to use that URL, it obviously just pulls back another JSON feed, and then it seems to pull back the actual featured image URL as:
"guid": {
"rendered": "http://blog2.slq.qld.gov.au/jol/files/2014/08/NT-app2.png"
},
When that path can be converted into a proper URL, then I can store it as variable and use it. What is happening here? Is this like a JSON feed within another JSON feed?
How could I extract the featured image URL out? I am familiar with building HTML content from a JSON feed where everything is available from the parent feed but I am not familiar with this pattern.
