Community Forums › Forums › Archived Forums › Design Tips and Tricks › Have page & post featured image replace the header if present.
- This topic has 4 replies, 3 voices, and was last updated 9 years, 3 months ago by DTHkelly.
-
AuthorPosts
-
January 23, 2015 at 12:36 am #138370jakelunnissMember
Hi!
I'm new to genesis after getting sick of the bloat that comes with themes. Reasonable with CSS & html, complete noob with php.
I asked support and they very kindly gave me a list of links to checkout which has helped me determine what I want, and be able to describe it!
What I'd like to do is have a page or post that has a featured image have that image underneath the menu, full width, and replace the site-wide header. If there is no featured image, I want the site-wide header to display. (This one is awesome: http://sridharkatakam.com/medium-like-full-view-featured-image-genesis/ but way more than I want to do)
I don't want any parallax or fading text, just a static image that scrolls with the content. I don't want the image to be the whole screen, but I do want it to be fullwidth.
Here's a link to a mockup so you can see what I mean, instead of trying to decipher the above!
https://drive.google.com/file/d/0B6kHG0uMBPR1OU5ELUl5V3c5NkE/view?usp=sharing
Thanks everyone!
https://drive.google.com/file/d/0B6kHG0uMBPR1OU5ELUl5V3c5NkE/view?usp=sharingJanuary 23, 2015 at 2:09 am #138381ᴅᴀᴠɪᴅMemberI haven't got time to conjure up the whole code. But I can get you half way there, as I already have this saved..
If you add this to the bottom of your functions.php file, it will put a large featured image below the header on single posts which have a featured image.
//* Display featured image on single posts add_action( 'genesis_after_header', 'yiv_large_featured_image_single_posts', 18 ); function yiv_large_featured_image_single_posts() { if ( ! is_singular( 'post' ) ) { return; } $image_args = array( 'size' => 'full', 'attr' => array( 'class' => 'alignnone large-featured-image', ), ); genesis_image( $image_args ); }
If I remember correctly, the posts without a featured image will just show nothing.
You will have to use conditional tags with the 'has post thumbnail' to correctly display what you needed for the posts that don't have an image. something like this..
if ( is_singular( 'post' ) && !has_post_thumbnail() ) { //code goes here for what you want to diplay for the single posts without a featured image// }
You will need to create a new image size for the featured image as well and change the size in the first bit of code from 'full' to whatever you name it, otherwise you'd be loading the full size image on every post and that would be really bad performance wise.
I love helping creative entrepreneurs build epic things with WP & Genesis.
January 23, 2015 at 2:16 am #138382ᴅᴀᴠɪᴅMemberreg the header, you say you know css.
You could just add this to your functions.php
//* Add custom body class to any post or page with featured image. add_filter( 'body_class', 'yiv_featured_image_body_class' ); function yiv_featured_image_body_class( $classes ) { if ( has_post_thumbnail() ) $classes[] = 'has-featured-image'; return $classes; }
which adds the 'has-featured-image' class to the body element of only the pages/posts with a featured image. You could use that body class to hide or do whatever you want with the header on those pages specifically using css.
Hope this helps.
I love helping creative entrepreneurs build epic things with WP & Genesis.
January 23, 2015 at 6:13 am #138405jakelunnissMemberThanks so much David, that was a huge help.
This is what I've ended up with:
add_action( 'genesis_before_header', 'feature_my_single_post_image' ); function feature_my_single_post_image() { if( is_singular( 'post' ) ) { global $post; $size = 'full-size'; $default_attr = array( 'class' => "aligncenter attachment-$size $size", 'alt' => $post->post_title, 'title' => $post->post_title, ); printf( '<div class="featured-header-image">%s</div>', genesis_get_image( array( 'size' => $size, 'attr' => $default_attr ) ) ); } }
It doesn't remove the header yet, but hey... It's working!
But there's one thing I can't figure out and it's driving me nuts!
How can I set the image to stretch to the size of the container? 'full-size' is coming back as the full size of the image, not the browser window.
January 23, 2015 at 7:24 am #138409 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.