2015-09-19 2 views
1

Я создаю относительно просто страницу блога, которая использует WP Rest Api и AngularJs для отображения данных на интерфейсе.WP Rest API Get Featured Image

На моей домашней странице я хочу вернуть заголовок, а затем изображение с изображением, а затем выдержку. Я потянул заголовок и выдержку в порядке, кажется, что в JSON признаком изображения является идентификатор носителя. Каков наилучший способ вытащить эти данные «на лету»?

Я видел различные вещи вокруг Интернета, которые используют PHP функции, но я думаю, что лучший способ сделать это в пределах углового контроллера, просто глядя на некоторые советы о именно то, что контроллер будет

Просмотр списка HTML

<ng-include src=" dir + '/form.html?v=2' "></ng-include> 
<div class="row"> 
    <div class="col-sm-8 col-lg-10 col-lg-push-1 post">   
     <div class="row-fluid"> 
      <div class="col-sm-12"> 
       <article ng-repeat="post in posts" class="projects"> 
        <a class="title" href="#/post/{{post.slug}}"><h2>{{post.title.rendered}}</h2></a> 
        <p ng-bind-html="post.excerpt.rendered | to_trusted"></p> 
       </article> 
      </div> 
     </div> 
    </div> 
</div> 

контроллер

.controller('listPage',['$scope','Posts', function($scope,Posts){ 

    $scope.refreshPosts = function(){ 
     Posts.query(function(res){ 
      $scope.posts = res; 
     }); 
    }; 
    $scope.refreshPosts(); 

    // CLEARFORMFUNCTION 
    $scope.clear = function(){ 
     $scope.$root.openPost = false; 
     jQuery('#save').modal('hide'); 
    }; 


    // SAVEMODALOPEN/COSE 
    $scope.openSaveModal = function(){ 
     jQuery('#save').modal('show'); 
    } 

    $scope.closeSaveModal = function(){ 
     jQuery('#save').modal('hide'); 
    } 

    // DATEFUNCTION 
    $scope.datify = function(date){ 
     $scope.date = newDate(date); 
     return $scope.date.getDate()+'/'+$scope.date.getMonth()+'/'+$scope.date.getYear(); 
    }; 
}]) 
+0

Вот ссылка, которая может быть полезна: https://1fix.io/blog/2015/06/26/adding-fields-wp-rest-api/ – Cyclonecode

+0

Отличная ссылка, отлично подходит для добавления настраиваемого поля в верните эскиз. Я замечаю, что использует функцию get_post_thumbnail_id, есть ли аналогичный вызов, чтобы вернуть post_large – jeastham1993

ответ

3

Оказывается, в моем случае есть новый плагин, который разрешает это без необходимости вторичного запроса. Смотрите мои последние Q:

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

+0

Удивительная находка, все еще была проблема с этим, поэтому спасибо – jeastham1993

4

Вы также можете изменить ответ JSON с PHP. Это возвращает только то, что мне нужно и очень быстро (с помощью _embed очень медленно по моему опыту)

У меня есть следующий код в плагине (используется для добавления пользовательских типов сообщений), но я думаю, вы могли бы поместить его в свой файл темы function.php.

php

add_action('rest_api_init', 'add_thumbnail_to_JSON'); 
function add_thumbnail_to_JSON() { 
//Add featured image 
register_rest_field('post', 
    'featured_image_src', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything 
    array(
     'get_callback' => 'get_image_src', 
     'update_callback' => null, 
     'schema'   => null, 
     ) 
    ); 
} 

function get_image_src($object, $field_name, $request) { 
    $size = 'thumbnail'; // Change this to the size you want | 'medium'/'large' 
    $feat_img_array = wp_get_attachment_image_src($object['featured_media'], $size, true); 
    return $feat_img_array[0]; 
} 

Теперь в вашем ответе JSON вы должны увидеть новое поле под названием "featured_image_src":, содержащий URL в миниатюре.

Подробнее об изменении ответов здесь:
http://v2.wp-api.org/extending/modifying/

А вот еще информация о функции wp_get_attachment_image_src() https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

** Примечание: Не забывайте <?php ?> теги, если это новый файл PHP!

Смежные вопросы