0

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

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.

1

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.