Gutenberg editor get post featured image by id

Question

Gutenberg editor get post featured image by id

fefe

2019年6月4日 12:26

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

Topic block-editor featured-post images Wordpress

Category Web

Jide Arowofela · Accepted Answer · 2019年6月4日 12:26

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.

Dror · Accepted Answer · 2019年3月6日 08:45

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.

moped · Accepted Answer · 2019年2月1日 13:29

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

About