WP Rest API + AngularJS: как получить избранное изображение для отображения на странице?

Я получаю доступ к данным Wordpress через плагин HTTP REST API (этот плагин wordpress: http://v2.wp-api.org/). Я знаю, как получить заголовок моего сообщения, но как мне отобразить избранное изображение, связанное с этим сообщением, с помощью этого плагина? Мой тест показывает заголовок сообщения и идентификатор изображения, но я не знаю, как отобразить фактическое изображение. Тестовый пример.

Вот мой код:

    <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>

wordpress rest angularjs wp-api
person redshift    schedule 24.10.2015    source источник

Ответы (4)


arrow_upward
9
arrow_downward

Чтобы получить ответ с избранными изображениями, добавьте _embed в строку запроса. пример:

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

Затем получите доступ к рекомендуемым изображениям в возвращенном ответе JSON, используя _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;
    });
});
person JeeShen Lee    schedule 12.07.2017

arrow_upward
4
arrow_downward

Лучшим способом было бы интегрировать 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, которая принимает любой допустимый размер изображения или массив значений ширины и высоты в пикселях в качестве второго параметра.

person Niket Pathak    schedule 04.07.2016

arrow_upward
0
arrow_downward

Я нашел очень простой способ сделать это.

Просто загрузите новый плагин Wordpress под названием Избранное изображение Better Rest API. Плагин добавляет поле better_featured_image в объект сообщения, которое содержит доступные размеры изображений и URL-адреса, что позволяет вам получить эту информацию без повторного запроса.

person redshift    schedule 24.10.2015
comment
@sakarya Да, он поддерживает настраиваемый тип сообщения, обязательно установите 'show_in_rest'=> true при инициализации вашего настраиваемого типа сообщения. Вот более подробный способ v2.wp-api.org/extending/custom-content -типы - person per.eight; 15.03.2016
comment
Я пишу пользовательские конечные точки с пользовательскими значениями. Когда мое приложение закончится, я поделюсь своими кодами. - person sakarya; 15.03.2016

arrow_upward
0
arrow_downward

Вы можете заменить <p>{{ post.featured_image }}</p> этим <img ng-src="{{post.better_featured_image.source_url}}" />

person profanis    schedule 24.10.2015