How to add featured image to postcard?

[jahzlariosa]

I wanted to add featured images to the homepage.

Any guidance will be appreciated TIA!

[jahzlariosa]

Nevermind managed to do it :D Thanks

[colbyfayock]

feel free to share how for others wandering onto this page :)

[jahzlariosa]

Hi @colbyfayock , So I went with this route.
So I decided to to create a custom field for the posts using ACF plugin.

• https://wordpress.org/plugins/advanced-custom-fields/
• https://github.com/wp-graphql/wp-graphql-acf

And added it to the query fragment

fragment PostFields on Post { id categories { edges { node { databaseId id name slug } } } databaseId date isSticky postId slug title postsCustomFeaturedImage { customFeaturedImage { sourceUrl } } };`

Then defined the constant and call it to the layout.

{postsCustomFeaturedImage && ( <div className={styles.fc}> <Link href={postPathBySlug(slug)}> <a> <Image src={postsCustomFeaturedImage.customFeaturedImage.sourceUrl} alt={title} layout="fill" /> </a> </Link> </div> )}

Works for me.

[Artchibald]

It would be nice to get an answer without extra plugins, great work by the way!

[colbyfayock]

hey @Artchibald you should be able to easily query for the FeaturedImage node on any proper Page without a plugin. The ACF plugin would just give you more flexibility in storing the image or storing multiple images.

Similarly, adding an image from within the content itself would come in the content of the Page node