Featured Image won't display on Posts page

Question

I hope this hasn't been covered already - I couldn't find it using my keywords. I designed a site with a new header image for each page. I call it on every page in the header.php file like this:

<img src="<?php echo the_post_thumbnail_url('full'); ?>" alt="Header Image">

I've enabled featured images in functions.php (add_theme_support('post-thumbnails');) and it works fine on literally every other page on the site.

Under Settings > Reading I switched the Front Page Displays: option from Your latest posts to A static page and set my Home and Posts pages to Home and Blog (pages I've created in the dashboard).

When I load the blog page, it shows an empty image container. Inspecting the elements shows that there is no src set. If I unset the /blog/ page as the Posts page under Settings > Reading, the image appears. I've tried this with /blog/ using index.php as its template and with it using home.php as its template. No difference.

If the Blog Page lets me set a featured image in the WordPress dashboard, why won't it display?

EDIT: I'm seeing this question, but the answer doesn't actually tell me why or what's happening.

Answer 1

When you have the Posts Page: set to "Blog" and then you visit the page directly (via the slug) does the header image display?

Setting the static "Posts" page to your "Blog" page overrides the template. Wordpress will use the Template Hierarchy to figure out which file to use to display the blog posts.

The problem is that WP_Query contains the list of posts to display because the settings are telling it that that page is used to display posts, and not that it is an individual page.

This means the template won't necessarily be aware of the page settings from when you edited the page.

We need to look at conditional tags documentation to find the right pattern to use:

if ( is_front_page() && is_home() ) {
  // Default homepage
} elseif ( is_front_page() ) {
  // static homepage
} elseif ( is_home() ) {
  // blog page
} else {
  //everything else
}

Using that pattern (or something similar) you can update your code to this:

// Use Conditional Tags to find out if you are on the header page
<?php if ( is_home() ) : ?>
<img src="<?php echo get_the_post_thumbnail_url(*BLOG PAGE ID HERE*,'full'); ?>" alt="header" />
<?php else  : ?>
<img src="<?php echo get_the_post_thumbnail_url('full'); ?>" alt="header" />
<?php endif; ?>

Using something like that, WP will grab the thumbnail URL based on the page settings.

Note my usage of get_the_post_thumbnail_url() including the Page ID to pull the header image from. Also your usage of the_post_thumbnail_url() is incorrect. The echo you used is redundant since the_post_thumbnail_url() is used to print the thumbnail URL. See the source here.

EDITED for clarity