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>)
})
3 Answers
Reset to default 6A 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.