Gutenberg editor get post featured image by id

admin管理员组

文章数量:1426515

How can I show a post featured image by post id in gutenberg editor? I have a slider with latest posts and when I iterate through over posts I would like to show the post featured image as well. Here is my example snippet

  const cards = displayPosts.map( ( post, i ) => {

            console.log(post.featured_media)

             return(<div className="card" key={i}>
                    <div className="card-image">
                        <div className="image is-4by3">
                            <PostFeaturedImage
                                currentPostId = {post.id}
                                featuredImageId = {post.featured_media}
                            />
                            <div className="news__post-title">
                                <div className="title is-5">
                                    <a href={ post.link } target="_blank">{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }</a>
                                    { displayPostDate && post.date_gmt &&
                                    <time dateTime={ format( 'c', post.date_gmt ) } className="wp-block-latest-posts__post-date">
                                        { dateI18n( dateFormat, post.date_gmt ) }
                                    </time>
                                    }
                                </div>
                            </div>

                            <div className="card-content">
                                <div className="content">
                                    <p dangerouslySetInnerHTML={ { __html: post.excerpt.rendered } }></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>)
        })

How can I show a post featured image by post id in gutenberg editor? I have a slider with latest posts and when I iterate through over posts I would like to show the post featured image as well. Here is my example snippet

  const cards = displayPosts.map( ( post, i ) => {

            console.log(post.featured_media)

             return(<div className="card" key={i}>
                    <div className="card-image">
                        <div className="image is-4by3">
                            <PostFeaturedImage
                                currentPostId = {post.id}
                                featuredImageId = {post.featured_media}
                            />
                            <div className="news__post-title">
                                <div className="title is-5">
                                    <a href={ post.link } target="_blank">{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }</a>
                                    { displayPostDate && post.date_gmt &&
                                    <time dateTime={ format( 'c', post.date_gmt ) } className="wp-block-latest-posts__post-date">
                                        { dateI18n( dateFormat, post.date_gmt ) }
                                    </time>
                                    }
                                </div>
                            </div>

                            <div className="card-content">
                                <div className="content">
                                    <p dangerouslySetInnerHTML={ { __html: post.excerpt.rendered } }></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>)
        })

• images
• block-editor
• featured-post

Share Improve this question asked Jan 21, 2019 at 9:18 fefefefe 89433 gold badges1414 silver badges3434 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 6

A simple and effective approach

const editor = wp.data.select('core/editor');
const imageId = editor.getEditedPostAttribute('featured_media');
const imageObj = wp.data.select('core').getMedia(imageId);

ImageObj gives you a reasonable amount of image data to work with.

After facing the same issue, I figured I need a way to fetch the json data and parse it.

Thanks to https://www.robinwieruch.de/react-fetching-data/ I figured there is already a fetch() function which I can use.

I guess you would want to fetch the json of the media id, parse it and get the featured image url. you can get additional information of that media (check options by logging the data):

  edit: withSelect(function(select) 
  {
     return {
        pages: select('core' ).getEntityRecords( 'postType', 'page', { per_page: -1 } )
     };
  })(function(props)
  {
     var featuredmedia = props.pages[0]._links["wp:featuredmedia"]["0"].href;
     fetch(featuredmedia)
      .then(response => response.json())
      .then(data => console.log(data.source_url));

at the last "then", you can set the source_url to some variable instead of logging it to console.

I have the same question and tried some ways to get the attachment ID and URL. In fact I got it, but I can't use it, because it's a JSON response and I can't save it in a variable. You can call the API wheter with the parent_post ID with {Your-WP-Baseurl}/wp-json/wp/v2/media?parent={Your-Post-ID} or by media ID {Your-WP-Baseurl}/wp-json/wp/v2/media/{Yout-Attachment-ID}.

I also tried the wp.data.select('core').getEntityRecord(), but it seems it doesn't work with postType 'attachment', but all other kind of post_type, even custom. So I have no idea what to try next.

本文标签： Gutenberg editor get post featured image by id