WP Rest API + AngularJS : 如何抓取特色图片显示在页面上?
WP Rest API + AngularJS : How to grab Featured Image for display on page?
我正在通过 HTTP REST API 插件访问 Wordpress 数据(这个 wordpress 插件:http://v2.wp-api.org/). I know how to grab my post title, but how do I display the featured image associated with that post using this plugin? My test shows the post title and the featured image ID, but I am unsure how to display the actual image. Test Example。
这是我的代码:
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div ng-repeat="post in posts | limitTo: 1">
<h2 ng-bind-html="post.title.rendered"></h2>
<p>{{ post.featured_image }}</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('Ctrl', function($http, $scope) {
$http.get("http://ogmda.com/wp/wp-json/wp/v2/posts").success(function(data) {
$scope.posts = data;
});
});
</script>
我找到了一个非常简单的方法。
只需下载名为 Better Rest API Featured Image 的新 Wordpress 插件。此插件将 better_featured_image 字段添加到包含可用图像大小和 url 的 post 对象,使您可以获取此信息信息而无需提出第二个请求。
您可以用 <img ng-src="{{post.better_featured_image.source_url}}" />
替换 <p>{{ post.featured_image }}</p>
更好的方法是将特色图片的 URL 集成到 json 响应中,这样您就可以在一个请求中获得所有内容。您可以添加以下代码(在 your-theme/functions.php 内)来实现此目的:
//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' );
那么在你看来,你可以使用
{{ post.featured_image }}
注意:要获得不同尺寸的相同图像,请使用上面的 wp_get_attachment_image_src 函数,它接受任何有效的图像尺寸,或宽度和高度值的数组像素作为它的第二个参数。
要获得特色图片响应,请在查询字符串中添加 _embed。示例:
http://demo.wp-api.org/wp-json/wp/v2/posts/?_embed
然后,使用 _embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url[=22 访问返回的 JSON 响应中的特色图片=]
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;
});
});
我正在通过 HTTP REST API 插件访问 Wordpress 数据(这个 wordpress 插件:http://v2.wp-api.org/). I know how to grab my post title, but how do I display the featured image associated with that post using this plugin? My test shows the post title and the featured image ID, but I am unsure how to display the actual image. Test Example。
这是我的代码:
<div ng-app="myApp">
<div ng-controller="Ctrl">
<div ng-repeat="post in posts | limitTo: 1">
<h2 ng-bind-html="post.title.rendered"></h2>
<p>{{ post.featured_image }}</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script>
var app = angular.module('myApp', ['ngSanitize']);
app.controller('Ctrl', function($http, $scope) {
$http.get("http://ogmda.com/wp/wp-json/wp/v2/posts").success(function(data) {
$scope.posts = data;
});
});
</script>
我找到了一个非常简单的方法。
只需下载名为 Better Rest API Featured Image 的新 Wordpress 插件。此插件将 better_featured_image 字段添加到包含可用图像大小和 url 的 post 对象,使您可以获取此信息信息而无需提出第二个请求。
您可以用 <img ng-src="{{post.better_featured_image.source_url}}" />
<p>{{ post.featured_image }}</p>
更好的方法是将特色图片的 URL 集成到 json 响应中,这样您就可以在一个请求中获得所有内容。您可以添加以下代码(在 your-theme/functions.php 内)来实现此目的:
//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' );
那么在你看来,你可以使用
{{ post.featured_image }}
注意:要获得不同尺寸的相同图像,请使用上面的 wp_get_attachment_image_src 函数,它接受任何有效的图像尺寸,或宽度和高度值的数组像素作为它的第二个参数。
要获得特色图片响应,请在查询字符串中添加 _embed。示例:
http://demo.wp-api.org/wp-json/wp/v2/posts/?_embed
然后,使用 _embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url[=22 访问返回的 JSON 响应中的特色图片=]
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;
});
});