ajax - How to add WP API and JS featured image attachment

admin管理员组

文章数量:1336660

I would like to fetch the image from the wordpress rest api - I have the following code: HTML:

<div class="post-item">
   <div id="posts">Loading posts...
</div>

Ajax script:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: ';per_page=3',            

            success: function (data) {
                var posts_html = '';
                $.each(data, function (index, post) {

                  posts_html += '<div class="post-item-image">';
                  posts_html += '<a href="' + post.source_url + '"></a>';
                  posts_html += '<img src="' + + '"</div>';
                  posts_html += '<div class="post-item-header">';
                  posts_html += '<span class="date">' + post.date + '</span>';
                  posts_html += '<span class="user">';
                  posts_html += '<a href="' + post.link +'">';
                  posts_html += '<img src=".jpg">Mysites</a></span></div>';
                  posts_html += '<div class="post-item-body">';
                  posts_html += '<a href="' + post.link + '" style="text-decoration: underline;"> '+ post.title.rendered + '</a>';
                  posts_html += '<div class="post-short-text"> ' + post.excerpt.rendered + '</div></div>';
                });
                $('#posts').html(posts_html);
            },
            error: function (request, status, error) {
                alert(error);
            }
        });
    });
</script>   

The problem is with wp:featuredmedia... this line:

posts_html += '<a href="' + post.source_url + '"></a>';

I tried also tried, but no luck so far

posts_html += '<a href="' + post.embed["wp:featuredmedia"][0].media_details.sizes.full.source_url + '"></a>';

Any advices?

I would like to fetch the image from the wordpress rest api - I have the following code: HTML:

<div class="post-item">
   <div id="posts">Loading posts...
</div>

Ajax script:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'GET',
            url: 'https://mysite.io/blog/wp-json/wp/v2/posts?_embed&per_page=3',            

            success: function (data) {
                var posts_html = '';
                $.each(data, function (index, post) {

                  posts_html += '<div class="post-item-image">';
                  posts_html += '<a href="' + post.source_url + '"></a>';
                  posts_html += '<img src="' + + '"</div>';
                  posts_html += '<div class="post-item-header">';
                  posts_html += '<span class="date">' + post.date + '</span>';
                  posts_html += '<span class="user">';
                  posts_html += '<a href="' + post.link +'">';
                  posts_html += '<img src="https://mysite.io/images/users/mysite-1548344709.jpg">Mysites</a></span></div>';
                  posts_html += '<div class="post-item-body">';
                  posts_html += '<a href="' + post.link + '" style="text-decoration: underline;"> '+ post.title.rendered + '</a>';
                  posts_html += '<div class="post-short-text"> ' + post.excerpt.rendered + '</div></div>';
                });
                $('#posts').html(posts_html);
            },
            error: function (request, status, error) {
                alert(error);
            }
        });
    });
</script>   

The problem is with wp:featuredmedia... this line:

posts_html += '<a href="' + post.source_url + '"></a>';

I tried also tried, but no luck so far

posts_html += '<a href="' + post.embed["wp:featuredmedia"][0].media_details.sizes.full.source_url + '"></a>';

Any advices?

• ajax
• jquery
• rest-api
• api
• wp-api

Share Improve this question asked May 20, 2019 at 17:47 Roga MenRoga Men 12955 bronze badges 1

• You were almost right and without needing to register a custom field (however it maybe useful in another cases, is a nice alternative). Rather than post.embed the embedded data is in post._embed wordpress.stackexchange/a/241422/16301 – Jesús Franco Commented May 21, 2019 at 22:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

I manage to solved it by adding this code (at the bottom) to the YOUR BLOG THEMES my path : wp-content/themes/twentysixteen/function.php:

function ws_register_images_field() {
    register_rest_field( 
        'post',
        'images',
        array(
            'get_callback'    => 'ws_get_images_urls',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

add_action( 'rest_api_init', 'ws_register_images_field' );

function ws_get_images_urls( $object, $field_name, $request ) {
    $medium = wp_get_attachment_image_src( get_post_thumbnail_id( $object->id ), 'medium' );
    $medium_url = $medium['0'];

    $large = wp_get_attachment_image_src( get_post_thumbnail_id( $object->id ), 'large' );
    $large_url = $large['0'];

    return array(
        'medium' => $medium_url,
        'large'  => $large_url,
    );
}

Hope this help someone.

本文标签： ajaxHow to add WP API and JS featured image attachment