- This topic has 8 replies, 2 voices, and was last updated 8 years, 6 months ago by Tom.
-
AuthorPosts
-
September 7, 2015 at 4:36 am #134960Michiel
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?
September 7, 2015 at 10:50 am #135052TomLead DeveloperLead DeveloperHmm, 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 ๐
September 7, 2015 at 11:41 pm #135184MichielHello 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
September 7, 2015 at 11:58 pm #135193TomLead DeveloperLead DeveloperHmm, 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? ๐
September 8, 2015 at 3:10 am #135207MichielHello 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
September 8, 2015 at 9:47 am #135324TomLead DeveloperLead DeveloperRemoving/adding the action isn’t hacky – using -300px position is ๐
Let’s give this a try: https://gist.github.com/generatepress/49b8f215f826ee2b27fc
September 10, 2015 at 2:59 am #135740MichielThanks!
So I have to create a child theme? Do you have a blanco child theme laying around?Regards, Michiel
September 10, 2015 at 5:41 am #135785MichielNevermind, I got it!
September 10, 2015 at 9:21 am #135849TomLead DeveloperLead DeveloperGreat!
For others wondering: http://generatepress.com/api/themes/generatepress_child.zip
-
AuthorPosts
- You must be logged in to reply to this topic.