use feature image above primary navigation

Hi there,

this user had a similar request, so maybe the PHP function Tom provides will work for you:

https://generatepress.com/forums/topic/cant-find-a-hook-i-need-in-the-header-area/#post-443555

• This reply was modified 4 years, 10 months ago by David.
• This reply was modified 4 years, 10 months ago by David.

Hi David, that does indeed sound like it. I copied the code into the header.php, right before the first do_action(‘wp_body_open’); , but that did nothing. Then I added the Code Snippets plugin and put the code in there and set it to “überall ausführen”, which translates to “execute everywhere” – nothing.
Any ideas what I am doing wrong?

I’ve also tried putting it into a page hero and then I tried using the hook element ‘wp_head’ – with no avail (and yes, I did use a display rule).

Try putting this into the generate_after_header_content hook:

<?php the_post_thumbnail(); ?>

Then you can disable featured images in the GP options.

Wow, that did the trick, thank you so much!

One last tweak: some feature images are smaller then current container width in the header. Is there a way to tell it to automatically size to full container width, or do I have to take care to save all of them with at least 1920 px?

Cheers and thanks again ??

It does not work as expected. I’m trying to copy the Freiburg site, but with a different image for each site: https://seebruecke-freiburg.de/

• The picture does not size as expected (even at 1920 px: if you scroll out too far white sides will appear)
• The Logo appears on top – can’t get it to show ON the picture

I tried again with the page header, merging content with header, with the feature image as background, logo amd/or text on the background and some padding to show more of the background. Sizing works ok if you scroll out, not so well if you scroll far in, and anyways I can’t get the navigation below the picture.

Also it would be nice if the navigation were actually ON the bottom of the picture. So something like the feature image as background in the header area, the navigation on the bottom of the background (not below), the logo and text somewhere further up, with padding on top and below.

I’ve been on it for hours, but not getting anywhere – even outlining the way to go forward would be so much help!

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Perhaps it would be better to set a background image for each page?

For example:

.site-header {
    background-image: url( 'URL TO YOUR IMAGE' );
    background-size: cover;
}

.page-id-123 .site-header {
    background-image: url( 'URL TO DIFFERENT IMAGE' );
}

.page-id-456 .site-header {
    background-image: url( 'URL TO ANOTHER IMAGE' );
}

You just need to update the IDs (123 and 456) with the actual IDs of the pages you’re targeting.

Let me know if this method works better or not ??

I will try this.

Though I am a bit worried: we are a mediterranean-activists group and I am trying to set up a site that is easy to manage for whoever comes after me, because you never know when a web-affine person will show up.

In the above setting, if a URL gets broke, chances are the person after me gets completely lost and frustrated.

The only good place I found to store an image that clearly belongs to a site was the feature image – is it not possible to stick the feature image into the above .site-header background image for each site?

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

It did work much better than the other tries and is easy to implement, though not as easy to manage.

Still researching about getting navigation onto the bottom of the picture (transparency is straightforward), but I’ll stay with the momentary fix for now if the feature-image-hack is not possible.

In any case, thank you so much for helping newcomers with such grace. And I’ve already recommended my boss what a great theme GeneratePress would be for his planned new site ??

The background image does not scale on the mobile, can’t use it like that – probably would need to give it a different padding on a mobile. From an earlier post of yours I understand, that background images typically don’t scale.

And just for feedback, a problem with an image above the navigation is, one can’t put a logo into the primary nav, because one can’t use “use navigation as header” without loosing the image.

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Can’t delete old posts, so as update: Scaled mobile versions now, so I will use background images.

Glad you got them to scale nicely!

It is a bit of a pain to manage the CSS…

What if we did this:

add_action( 'wp_head', function() {
    $image = get_the_post_thumbnail_url( get_the_ID() );

    if ( ! $image ) {
        $image = 'URL TO A FALLBACK IMAGE IF NO FEATURED IMAGE';
    }
    
    ?>
        <style>
            .site-header {background-image: url( '<?php echo $image; ?>' );}
        </style>
    <?php
} );

That function will look for the featured image and use it as a background image in the header automatically.

You can add the function using one of these methods: https://docs.generatepress.com/article/adding-php/

Oh, cool ?? That’s really, really nice.
How would I tell it simply not to do anything if there is no feature image? We have sites that are planned to go without.
And how do I tell CSS to only do the background configuring for sites with a feature image, so sites without a picture don’t have a white header?

Tried to put it into the wp_head-hook (that would solve the problem with the header-CSS) but that did not work at all.

Also: I’ve moved my navigation up by -60px to overlay the picture. But now the main nav-bar-background is transparent and I can’t get it to react to any color, neither in the color-section of the customizer nor by adding CSS, not even by giving him an explicit transparency with an rgb-function. Everything else in the navigation bar reacts to colors, the texts, the background of the item currently in use… I’m stomped…

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

My code now works well, but the navigation-bar color is not accepted, as said above, not even with !important. Can that be helped?

add_action( 'wp_head', function() {
    $image = get_the_post_thumbnail_url( get_the_ID() );
	$posttype = get_post_type ( get_the_ID() );

    if ( !empty($image) && $posttype == 'page' ) {
		?>
			<style>
				.site-header {background-image: url( '<?php echo $image; ?>' );}

				.inside-header {
					padding: 210px;
					line-height: 0px;
				}

				.site-header {
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
				}

				@media (min-width: 769px) and (max-width: 1024px) {
					.inside-header {
						padding: 150px;
					}
				}

				@media (max-width: 768px) {
					.inside-header {
						padding: 110px;
					}
				}
		
				.inside-navigation {
					margin-top: -50px;
				}
		
				.main-navigation {
					background-color: rgb(34, 34, 34) !important;
				}

			</style>
		<?php
	}
	else {
		?>
			<style>

				.inside-header {
					padding: 0px;
					line-height: 0px;
				}

			</style>
		<?php	
	}
} );

• This reply was modified 4 years, 10 months ago by carobina.
• This reply was modified 4 years, 10 months ago by carobina.

Also the sticky navigation is gone… It’s set in the customizer, and shows on all sites I did not use the feature image hack on.