- This topic has 8 replies, 2 voices, and was last updated 5 years, 5 months ago by
Tom.
-
AuthorPosts
-
September 7, 2015 at 4:36 am #134960
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?
September 7, 2015 at 10:50 am #135052Tom
Lead 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 7, 2015 at 11:41 pm #135184Michiel
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
September 7, 2015 at 11:58 pm #135193Tom
Lead 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? π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 8, 2015 at 3:10 am #135207Michiel
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
September 8, 2015 at 9:47 am #135324Tom
Lead DeveloperLead DeveloperRemoving/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-developmentSeptember 10, 2015 at 2:59 am #135740Michiel
Thanks!
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 #135785Michiel
Nevermind, I got it!
September 10, 2015 at 9:21 am #135849Tom
Lead DeveloperLead DeveloperGreat!
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 -
AuthorPosts
- You must be logged in to reply to this topic.