Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to show featured image full width after header on a specific post/s?
Tagged: background image, featured image, full width image, hero image
- This topic has 7 replies, 3 voices, and was last updated 7 years, 9 months ago by
Brad Dalton.
-
AuthorPosts
-
May 4, 2017 at 5:18 am #205865
sigul
MemberHi there,
Anyone got a function to get the featured image and use it as a full width background in the after header hook in a specific post, or category? I'd like to use it only for "stories" category, or enabling it on the post I want, but can't figure out how.
It should be something like:
function to position feature image after header and add to it a specific class
Rule to do this only if post_is_singular and category equals to the one desired.Can anyone point me anywhere to learn how to do it?
Thanks in advance
May 4, 2017 at 5:21 am #205867Brad Dalton
ParticipantMay 4, 2017 at 5:50 am #205876sigul
MemberI am developing it here themedemo.silviogulizia.com and I've used Blox plugin do to it here http://themedemo.silviogulizia.com/a-post-with-a-cover-image/ but it is very complicated and not satisfying , not automated.
May 5, 2017 at 3:42 am #205945sigul
MemberI ended up with this function by following this great tutorial from Sridhar Katakam but couldn't manage to resize images correctly. Anyone has an idea?
// Register a custom image size for cover images on single Posts add_image_size( 'post-cover', 1600, 400, true ); add_action( 'genesis_after_header', 'cover_image' ); function cover_image() { // if we are not on a single Post, abort. if ( !is_singular( 'post' ) ) { return; } // set $image to URL of featured image. If featured image is not present, set it to post-image.jpg in child theme's images directory. if ( has_post_thumbnail() && has_category(stories) ) { $image = genesis_get_image( 'format=url&size=post-cover' ); ?> <div class="post-cover" style="background-image: url('<?php echo $image; ?>')"> <div class="wrap"> <?php genesis_do_post_title(); ?> </div> </div> <?php // Remove entry title remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); } }
And css
/* Post cover image */ .post-cover { padding: 200px 0; background-size: cover; background-repeat: no-repeat; background-position: center; } .post-cover .entry-title { margin-bottom: 0; color: #fff; background-color: rgba(0,0,0,.75); padding: 15px; text-transform: uppercase; max-width: 50%; } @media only screen and (max-width: 1023px) { .post-cover .entry-title { max-width: none; } }
May 6, 2017 at 3:59 am #206010swofford
MemberI was looking to something similar to this article...
How to overlay entry title on featured image in single Posts
I was able to implement this, but wanted to do it to the /category/articles/ list...
Currently it outputs
Title
ImageLooking to overlay the title much like this tutorial does for the actual post page.
Thanks,
Steve
May 6, 2017 at 4:36 am #206012sigul
MemberI found a better solution and posted it here as a comment to the original article
Still wondering how to remove the table-cell margin from the entry-title background
See here how it works
http://themedemo.silviogulizia.com/a-post-with-a-cover-image/
May 6, 2017 at 4:52 am #206013sigul
MemberBy mixing the code I did even better, but still wondering now how to center the title (at least, on mobile as for now I am working on my iPhone)
May 21, 2017 at 2:13 am #206776Brad Dalton
Participant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.