古登堡编辑通过ID获得发布的特色图片

时间:2019-01-21 作者:fefe

如何在古腾堡编辑器中按帖子id显示帖子特色图像?我有一个滑块,上面有最新的帖子,当我反复浏览这些帖子时,我也想显示帖子的特色图片。下面是我的示例片段

  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 个回复
SO网友:Jide Arowofela

简单有效的方法

const editor = wp.data.select(\'core/editor\');
const imageId = editor.getEditedPostAttribute(\'featured_media\');
const imageObj = wp.data.select(\'core\').getMedia(imageId);
ImageObj为您提供了合理数量的图像数据。

SO网友:Dror

在遇到同样的问题后,我想我需要一种获取json数据并对其进行解析的方法。

幸亏https://www.robinwieruch.de/react-fetching-data/ 我想已经有一个fetch()函数可以使用了。

我想您应该获取媒体id的json,对其进行解析,然后获取特色图像url。您可以获取该介质的其他信息(通过记录数据来检查选项):

  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));
在最后一个“then”中,您可以将source\\u url设置为某个变量,而不是将其记录到控制台。

SO网友:moped

我也有同样的问题,并尝试了一些方法来获取附件ID和URL。事实上我得到了它,但我不能使用它,因为它是一个JSON响应,我不能将它保存在变量中。您可以使用parent\\u post ID调用API wheter{Your-WP-Baseurl}/wp-json/wp/v2/media?parent={Your-Post-ID} 或按媒体ID{Your-WP-Baseurl}/wp-json/wp/v2/media/{Yout-Attachment-ID}.

我也试过wp。数据选择(“核心”)。getEntityRecord(),但它似乎不适用于postType“attachment”,而是所有其他类型的post\\u类型,甚至自定义。所以我不知道下一步该怎么做。

相关推荐

Images with overlay

我有一些图片在一个容器中,我想添加一个覆盖和图标。这不是现成的,但我找到了一些有用的代码:HTML:<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS:.featured {