[Resolved] display featured image (pages or posts) as header image

[sparkle]

i’m wondering if this solution should still work to replace the header image with the featured image on a page or post.

i had no luck with either the child theme method nor the functions.php method.

the submitted link attached this this request is a post that has a featured image assigned. i would like it to appear where the header image is instead of below the header.

to make me even more of a pain in the tukkos, i also have a function in my child theme that makes the first image in a post into the featured image if none is assigned. it would be amazing and magical if it would cooperate with that and put it those subbed images into the header. here is that function.

// Use it temporary to generate all featured images
add_action('the_post', 'auto_featured_image');
// Used for new posts
add_action('save_post', 'auto_featured_image');
add_action('draft_to_publish', 'auto_featured_image');
add_action('new_to_publish', 'auto_featured_image');
add_action('pending_to_publish', 'auto_featured_image');
add_action('future_to_publish', 'auto_featured_image');
// END Use first image if no Featured Image

[Tom]

Hi there,

Are you trying to set your featured image as the background image to your site header?

[sparkle]

yes! that’s exactly what i’m hoping to do on pages and posts.

[Tom]

You could use a function like this:

add_action( 'wp_head', function() {
    if ( ! is_singular() ) {
        return;
    }

    $image = get_the_post_thumbnail_url();

    if ( ! $image ) {
        return;
    }
    ?>
    <style>
        .site-header {
            background-image: url( '<?php echo $image; ?>' );
        }
    </style>
    <?php
} );

Let me know 🙂

[sparkle]

oh dang. i want that to work, but it doesn’t. it’s giving me this: Parse error: syntax error, unexpected end of file in /home2/capitom7/public_html/CAF18/wp-content/themes/generatepress_child/functions.php on line 93

eta: line 93 is the closing bracket at the end of your snippet.

[Tom]

Sorry about that! Can you try the updated code instead?

[sparkle]

ah! now it works for posts with featured images assigned! thank you!

is it not possible for pages? i can’t find anything obvious with google.

[Tom]

It should work for pages. The pages have a featured image set?

[sparkle]

my mistake. it DOES work with featured images uploaded to pages. i noticed that after my cache had completely cleared. now if i can seem to get the first image thing sorted for pages… because that part of it works for posts!

🙂

[Tom]

How are you getting the first image set as the featured image for posts?

[sparkle]

sorry, this is the complete function

// Use first image if no Featured Image

function auto_featured_image() {
    global $post;
 
    if (!has_post_thumbnail($post->ID)) {
        $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
         
      if ($attached_image) {
              foreach ($attached_image as $attachment_id => $attachment) {
                   set_post_thumbnail($post->ID, $attachment_id);
              }
         }
    }
}
// Use it temporary to generate all featured images
add_action('the_post', 'auto_featured_image');
// Used for new posts
add_action('save_post', 'auto_featured_image');
add_action('draft_to_publish', 'auto_featured_image');
add_action('new_to_publish', 'auto_featured_image');
add_action('pending_to_publish', 'auto_featured_image');
add_action('future_to_publish', 'auto_featured_image');

[Tom]

There’s nothing there making it apply to posts only. You’re sure it’s not working for pages?

Be sure to remove this line as well: add_action('the_post', 'auto_featured_image');

[sparkle]

i’m pretty sure.

i commented out that line, but still not seeing the first image go to the header on pages.

if you click on the about vic page, the first image of him standing in the river would be in the header if it was working properly.

i cleared my cache, used a private browsing window, checked a different browser, but still not seeing it. i know it’s not ‘part’ of GP so i really appreciate all the help you’re trying to offer.

🙂

[sparkle]

ok…. slightly off topic, but still GP on this site… any way to avoid this “menu dance” i’m seeing on smaller width screens?

View post on imgur.com

[Tom]

And you’ve re-saved that page since adding the code?

As for the menu items, try this CSS:

.main-nav > ul {
    display: flex;
}

[Author]

Posts