How do I put my frontpage featured image in a page template for home.php?

Question

Important:

I want to makes sure this is clear: I am not asking how to get the post thumbnail. I am asking how to get the featured image for single page which is created through the Gutenberg editor with a page template.

I have already looked at many similar questions and I still can't find a straightforward answer.

Questions such as this: How to display a page's featured image?

https://stackoverflow.com/questions/16570413/get-featured-image-of-a-page-no-post-in-wordpress

Explanation of Question:

I'm working on building a new theme for a simple portfolio website. I want it to use Gutenberg as much as possible and to use as few other plugins as possible.

I have created a home.php file. I have also designated it as a theme using the following code:

<?php
/**
 * Template Name: Home
 *
 * Description: A custom template for the front page
 *
 * @package JackalopePro
 * @version 1.5
 */

When I go to the "Pages" section of the Admin Panel I can correctly see "Home" in my options of page templates when creating a new page in Gutenberg. I can set content, title, featured image etc, and publish. (this will page created in the admin panel will be referred to as FrontPage-G)

When I add <p> this is the home template</p> to my home.php file I can see that upon previewing the FrontPage-G. I can see it when I load my website from it's root or default page etc. So the template is correctly being read as the necessary template file for the page that was created in Gutenberg, AND it's being correctly read as the page which the frontpage of the website should be using.

BUT

It does not load the featured image, or content/title when I call get_post_thumbnail();

My frontpage should be structured like this: (structure written in pseudo code obviously)

<Nav></Nav>
<FrontpageFeaturedImage></FrontpageFeaturedImage>
(The following is a wp query loop for all the blog posts)
<Post>
  <ThePostFeaturedImage></ThePostFeaturedImage>
  <ThePostTitle></ThePostTitle>
  <ThePostExcerpt></ThePostExerpt>
</Post>
<Post>
  <ThePostFeaturedImage></ThePostFeaturedImage>
  <ThePostTitle></ThePostTitle>
  <ThePostExcerpt></ThePostExerpt>
</Post>
<Post>
  <ThePostFeaturedImage></ThePostFeaturedImage>
  <ThePostTitle></ThePostTitle>
  <ThePostExcerpt></ThePostExerpt>
</Post>
<Post>
  <ThePostFeaturedImage></ThePostFeaturedImage>
  <ThePostTitle></ThePostTitle>
  <ThePostExcerpt></ThePostExerpt>
</Post>
<Post>
  <ThePostFeaturedImage></ThePostFeaturedImage>
  <ThePostTitle></ThePostTitle>
  <ThePostExcerpt></ThePostExerpt>
</Post>
<Footer></Footer>

When I visit my frontpage, it shows a Hero Image for the frontpage but instead of it being the Featured Image that I assigned in the the Frontpage-G page in Gutenberg, it's just the first featured image of my blog posts (so in other words you see the image for the first blog post twice on that page).

When I try to check it through the "view page" of Frontpage-G it either shows me nothing, or it shows me a page in which there is the correct Featured Image as the frontpage Hero Image, but then underneath it, instead of having the rest of the blog posts from the page, it has a single post, and it has just the information from the page that I am trying to use as my frontpage, Frontpage-G.

Is it possible for me to edit or change my frontpage using Gutenberg? If I want to have a frontpage with a featured Image and Title can I change that using Gutenberg or do I have to resort to using ACF or something of that sort?

Answer 1

I figured it out with some help on the Wordpress Slack.

Basically I had to use front-page.php instead of home.php, and set the specific page created in the editor. Then in my front-page.php I had to reset the wp-query after getting the page's content to specifically target the posts content using the following code:

$args = array('post_type' => 'post');
$the_query = new WP_Query( $args );
   if ( $the_query->have_posts() ) :
       while ( $the_query->have_posts() ) : $the_query->the_post();?>
<p> the content from the posts go here </p>
       <?php endwhile;?>
   <?php endif;?>