Community Forums › Forums › Archived Forums › General Discussion › Full width feature image below primary menu in genesis
- This topic has 12 replies, 2 voices, and was last updated 8 years, 10 months ago by clairelobel.
-
AuthorPosts
-
June 22, 2015 at 4:45 pm #157217clairelobelMember
I would appreciate any help. Been struggling to do this for a while and cannot find a tutorial that covers it. I'm trying to add full width feature image below the primary menu bar in genesis.
I've managed to either add a full width featured image above the menu bar using 'genesis_after_header'. I've also managed to add a featured imaged below the menu using 'genesis_before_content_sidebar_wrap' but this is not full width because it sits in the width of main content area.
I'm also trying to show the page title for each page in a full width grey bar below the featured image and cannot figure out how to do this either.
Is there a way to relocate the primary nav to the header area (after the logo and header right area), then the 'genesis_after_header' hook will hopefully work for the other areas.
So, to summarise, this is what I'm aiming for:
Header area
Menu bar
Full width feature image when a featured image is set for page (not on home page)
Full width page title barI am signed up to Sridhar Katakam's tutorials, which are excellent, but I cannot find one that covers what I need.
Thank you in advance
ClaireJune 22, 2015 at 5:48 pm #157230brockMemberI took a shot at your problem and here's what I have come up with. Apologies if I have misunderstood what you are going for. Also be aware that these code snippets are based on the Genesis Sample Theme.
You can paste the following code into your
functions.php
file://* Add full-width featured image above post add_action( 'genesis_after_header', 'bc_add_the_featured_image' ); function bc_add_the_featured_image() { if ( is_singular( 'post' ) ) { return the_post_thumbnail( 'post-image' ); } } //* Add gray title bar add_action( 'genesis_after_header', 'bc_add_gray_title_bar' ); function bc_add_gray_title_bar() { if (is_singular('post')) { remove_action('genesis_entry_header', 'genesis_do_post_title'); } if ( is_singular('post') ) { echo "<div class='graybar'><div class='wrap'>"; echo the_title('<h1 class="entry-title">', '</h1>'); echo "</div></div>"; } }
You can place the following CSS styles into your
style.css
file above the section for media queries./* BC custom styles -----------------------------------------------------------------------------------------------------*/ .graybar { background: #555; padding: 50px; margin-top: -8px; } .graybar .entry-title { color: #fff; font-size: 3em; }
You may want to modify the CSS according to your tastes. I am interested to know if this solves your problem. Good luck.
June 22, 2015 at 5:56 pm #157231clairelobelMemberHi Brock
Thank you for your reply and for your help.
I have tried adding the code but nothing shows. I am trying to add these on regular inner pages of the site, not posts. Could that be why?
Claire
June 22, 2015 at 5:58 pm #157232clairelobelMemberI am using the Genesis sample theme
June 22, 2015 at 6:00 pm #157234brockMemberYup, sorry I misread. So in that code everywhere it says
is_singular('post')
change it tois_singular('page')
. Also note that if the featured image isn't big enough it won't stretch full width based on what I posted. Thought I should mention that.June 22, 2015 at 6:08 pm #157235clairelobelMemberFantastic that worked. I wish I'd posted this earlier. It would have saved me hours of trying.
Just need to play around with the css a bit.
Big thanks
Claire
June 22, 2015 at 6:11 pm #157236brockMemberGreat!
June 22, 2015 at 6:16 pm #157237clairelobelMemberOne last question, if you don't mind.
I'm trying to limit the height of the image box just for these feature images. I've tried adding the code below but it doesn't work:
.attachment-post-image wp-post-image img{
max-height: 200px;
}Any ideas?
June 22, 2015 at 6:20 pm #157239clairelobelMemberAnd sorry, a final thing. The grey title bar is also showing on the home page, which I don't want. I only want it to show on the inner pages of the site.
Should I add something in the php or use css to hide it? I think php is probably better. Is that correct?
June 22, 2015 at 6:29 pm #157241brockMemberFor the image height, modify your selector rule like so:
img.attachment-post-image.wp-post-image { max-height: 200px; }
For the front page, I am guessing you have a page set as the front page via customizer. You're right, it will be a PHP modification. You will modify it like this:
//* Add gray title bar add_action( 'genesis_after_header', 'bc_add_gray_title_bar' ); function bc_add_gray_title_bar() { if (is_singular('page') && !is_front_page() ) { remove_action('genesis_entry_header', 'genesis_do_post_title'); } if ( is_singular('page') && !is_front_page() ) { echo "<div class='graybar'><div class='wrap'>"; echo the_title('<h1 class="entry-title">', '</h1>'); echo "</div></div>"; } }
It is the same thing although the condition is modified to no show if it's on the front page. What has been added is the
&& !is_front_page()
to the conditions. Which just means "and if it's not the front page, go ahead". Don't hesitate to let me know if you have any more problems with it.June 22, 2015 at 6:40 pm #157243clairelobelMemberThank you again.
The php works perfectly and now excludes the title bar from the home page.
The image size works. Ideally it would be good if I could restrict the size of the image box rather than the image. That way, if my client changes the feature image and uploads the incorrect size, it won't stretch it. But that's just being over careful. This works just fine.
Thank you.
June 22, 2015 at 6:56 pm #157244brockMemberYou're quite welcome and I know what you mean about the image thing! As of now it's just free-floating with no container specifically for it. So, if the dimensions of the image aren't just right it might be an issue.
June 22, 2015 at 7:02 pm #157247clairelobelMemberThank you.
Claire
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.