Page header image above navigation (or behind logo)

[Michiel]

GP-Premium, when I add a header image to a page (contained), the image gets displayed after the menu. I don’t see any options to change this page order.
I’d like the header above the menu. Preferably behind the logo, so that each page can have it’s own logo background.

I’ve tried absolute positioning but then IE9& IE10 display the image in the left hand corner, instead of following container width.

Do I need to create a child theme?

[Tom]

Hmm, can’t do this very easily using the Page Header add-on.

You can do something like this though:

1. On your page, click the “Screen Options” tab at the top right of the page. Make sure the “Custom Fields” checkbox is checked.

2. Now look for the “Custom Fields” metabox – click “Enter new”.

3. Under “Name”, add: custom_header

4. Under “Value”, enter the URL to your image.

5. Now in GP Hooks, in the “wp_head” hook, add this:

<?php
global $post;
$image = get_post_meta($post->ID, 'custom_header', true);
if ( ! empty( $image ) ) : ?>
      <style>
            .site-header {
                  background-image: url('<?php echo $image; ?>');
            }
      </style>
<?php endif; ?>

Be sure to check the “Execute PHP” checkbox.

This will check to see if we have a “custom_header” attribute on the current page – if we do, we’ll display that image.

Once you’ve added the “custom_header” name, you’ll be able to select it from the dropdown on all future pages (instead of having to click “Enter new”).

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michiel]

Hello Tom, thanks for your quick reply! Thumbs up for your work!

That’s a good solution, but I’m looking for a more end-user friendly version. Would removing the action and adding this same action to the header work?

Alternatively, is it possible to wrap the image in another div if used with the Page Header – Image tab? With 2 divs I can do the following trick:

<style type="text/css">
/* make the logo layer transparent */
.site-header { z-index: 3; overflow: hidden;}
.site-header img, .header-image {max-width:none;}
/* Simulate position absolute by showing the contents but remove it from normal flow */
.page-header-content {position:relative; height:0; overflow:visible;}
/* moving the image up, clipping it to 240px */
.inside-page-header-container {
position: relative;
top: -300px;
z-index: 2;
height: 240px;
overflow: hidden;
}
.page-header-image img {
max-width:1100px;
vertical-align:right;
}
</style>

Currently I add the image html to the Page Header – Content tab, because it wraps the content in another div. This requires knowledge to copy the html from the media. But I can do the above trick.

Thanks, Regards, Michiel

[Tom]

Hmm, definitely a tough one. It’s super hacky doing it the above way.

What if we removed the page header from showing up by removing the action, and then used the core Featured Image metabox to display the site header background? Would that work? 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michiel]

Hello Tom,
Thanks for an even quicker reply.

Yeah that would work. Remove the action and use wp hooks to add the featured image?

Why is adding the same action (we removed) to the header super hacky? Or do you mean my relative positioning?
Yes it is a hack, but except for the use of content tab instead for image tab (under Page Header) it’s working.

Regards, Michiel

[Tom]

Removing/adding the action isn’t hacky – using -300px position is 🙂

Let’s give this a try: https://gist.github.com/generatepress/49b8f215f826ee2b27fc

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michiel]

Thanks!
So I have to create a child theme? Do you have a blanco child theme laying around?

Regards, Michiel

[Michiel]

Nevermind, I got it!

[Tom]

Great!

For others wondering: http://generatepress.com/api/themes/generatepress_child.zip

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts