get_post_meta fields don't show up on posts page

Question

I'm new here, and to coding! I've been working hard (so, so hard...so hard) to create my website and with occasional help I've created a look and feel I like using some custom get_post_meta fields for my banner and background under header.php.

<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
<?php
$banner = get_post_meta($post->ID, 'banner', true);
if (is_front_page() || $banner == '') { ?>
    <header id="masthead" class="site-header" role="banner">
<?php
} else {
?>
    <header id="masthead" class="site-header" role="banner" style="background-image: url(<?=$banner?>); background-size:cover">
<?php } ?> 

But I'm really stumped on this problem--none of them show up on my /blog page, which is a pretty important page; it just shows the site's general header content, same as the front page. I've researched enough to understand that this is because I have the blog page set as the posts page (with a static homepage), so it's not referencing the same header.php content as the pages are but rather the "homepage template" which is a template that indexes the posts, so my /blog page no longer has a page ID and isn't included under <div id="page"> that is being referenced for my custom fields. So how do I get this post index template to reference the same banner code as the pages of my site? The solution on this page-- Custom fields won't display on my blog page --seems right for my problem too, but I can't figure out how and where to use the get_option( 'page_for_posts' ) code in my own code!

Answer 1

Use it like this :

<div id="page" class="hfeed site">
<?php do_action( 'before' ); ?>
<?php
      $page_id = ( 'page' == get_option( 'show_on_front' ) ? get_option( 'page_for_posts' ) : get_the_ID );

      $banner = get_post_meta( $page_id, 'banner', true ); 

    if (is_front_page() || $banner == '') { ?>
      <header id="masthead" class="site-header" role="banner">
  <?php
   } else {
   ?>
     <header id="masthead" class="site-header" role="banner" style="background-image: url(<?=$banner?>); background-size:cover">
  <?php } ?> 

Answer 2

I had same problem, and this worked for me:

$page_id = ( 'page' == get_option( 'show_on_front' ) ? get_option( 'page_for_posts' ) : $post->ID );
$banner = get_post_meta($page_id, 'banner', true);

Answer 3

For post/blog page

$posts_page = get_option( 'page_for_posts' );

$banner = get_metadata('post', $posts_page, 'banner')[0];


<header id="masthead" class="site-header" role="banner" style="background-image: url(<?=$banner?>); background-size:cover">