Featured image on frontpage

šŸ™‹Get Help
1

I have created a custom theme, and have post excerpt on the front page from two categories.
I would like to have featured images for each excerpt, but it is not working with the solutions I have found here. It says either internal 500 error, or the featured_media is undefined.

The featured image turns up inside the post, but not on the front page. I am importing from
// import FeaturedMedia from ā€œā€¦/featured-mediaā€;

 return (
      <>
        <PortfolioContainer>
          <StyledTitle>{category.name}</StyledTitle>
          <FlexPortfolioContainer>
            {posts.slice(0, 3).map((p) => (
              <FlexPortfolioItem key={p.id}>
                <img src={ImagePlaceholder} />
                <Link link={p.link} key={p.id}>
                  <h2>{p.title.rendered}</h2>
                  <FeaturedMedia src={fmedia.source_url} />
                  <Html2React html={p.excerpt.rendered} />
                </Link>
              </FlexPortfolioItem>
            ))}
          </FlexPortfolioContainer>
        </PortfolioContainer>
      </>
    );
  }
2

There are two main ways to get the featured image from a category.

Option 1. Fetch it when you load homepage.
So you will need to do a actions.source.fetch('/your-category/');

Option 2. Modify your homepage rest api response in PHP

if ( ! function_exists( 'page_add_rest_data' ) ) {
	function page_add_rest_data( $data, $post, $request ) {

if (page.template === "homepage.php") {
// Go get your categories and the data necessary and set it
}
		return $data;
	}
}

add_filter( 'rest_prepare_page', 'page_add_rest_data', 12, 3 );

I prefer option 2 since it will save you potentially 2 network calls and not have to do any promises etc. It also will be faster as 1 payload especially if you have object caching in your wordpress server.

3

Hi,
Thank you for the reply.

I donā€™t know php, so I donā€™t really know where to put that code :).

4

Many places. But simplest place is in a functions.php under your /wp-content/themes/[theme you are using]/functions.php

5

Ok, thank you! I will have a try.

6

I canā€™t find my functions.php since I am creating a custom theme, and that is not in the themes folder in wp.

7

I have tried putting this in the functions.php file now, but why does it say homepage.php? I am adding the image in my posts as featured image, and would like the image to also load on the frontpage for each post.

It is working in the post page, so that is working.

Any thoughts?

8

So for the homepage, you will need to create a page template so that you donā€™t load the code on all other pages(about us page / etc.)

Creating a page template instructions: Page Templates | Theme Developer Handbook | WordPress Developer Resources

you can change homepage.php to anything you want.

When you mention ā€˜front pageā€™ Iā€™m presuming you are using a Page as the home page or are you using the blog index as the front page?

9

I am using my own front page component, called home.js. But donā€™t know if that is the template page.

There is a solution in the forum with featured media that I tried, which seem to be less complicated, but it did not work. Have you seen that?

10

How about the front page in wp? What are you using to call it? Is it a page or the blog index?

Hmm nope. I like to generally have all the payload information in 1 API call (avoids multiple calls to the server and since object caching is available in my webhost, which is wpengine, it actually has snappy responses).

11

Hi again,
I would like to avoid implementing it in the wp-theme/wp-frontpage, since this is adviceable when you update the wp-theme the code will need to be updated and implemented again unless you use a child theme.

I would like the solution to be in my frontity theme, not the wp-theme.

12

However, since you are using frontity, why would you need a theme?

13

As far as I understand you need to have some kind of theme when using frontity. And I also want to be able to use the menu function through wp.

14

I was hoping for a solution like this: