[Resolved] Full Width Featured Image on a Custom Page for a Specific Category?

[Tom]

In your Code Snippets, you have the following snippet that is adding the background image:

add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) {
    if ( 423 === $options['element_id'] ) {
        $latest_posts = get_posts( 'numberposts=1' );
        $latest_id = $latest_posts[0]->ID;

        $image_url = get_the_post_thumbnail_url( $latest_id );
    }

    return $image_url;
}, 423, 2 );

If you remove that, it will go away.

[Allen]

Yep, I sure do. Thanks Tom. (I created that snippet from a forum post of yours trying to pull off this same thing. Forgot to turn it off.)

So turning that snippet off accomplishes the original idea.

Now, is there any way I can create a second version of this custom page header element to use the category short code to get ‘featured’ posts to show, but to style that second header just like the regular hero headers using template tags like {{post_title}} over the top of the hero image?

[David]

Just to be clear – this second header will be displaying a single featured post and that will and the Post content needs to be overlaying its Featured image ?

If so then set up a new header element with your WPSP Shortcode, and we can take a look at the CSS required to overlay that content.

[Allen]

Yes, correct, the second version of a custom home page header would have the headline, perhaps the description/meta, and a READ MORE button on the image itself (just like can be done on the other hero locations).

I have created a new copy of the custom header element, Home Page Hero w Overlay, and applied it to the home page, turning off the Location in Display Rules for the original.

Thank you David!

[David]

Can you confirm the correct URL – if i visit your home page i still see the video header

[Allen]

The video header is using the exact same element/shortcode as a photo header. Same shortcode in WPSP.

But I’ve changed the current featured post to a photo version, to eliminate the variable.

Please use the active homepage. Thanks David.

[David]

Try adding this CSS:

.page-hero.wpsp-hero .wp-show-posts-image.wpsp-image-center{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

.page-hero.wpsp-hero  .wp-show-posts-inner {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background-color: rgba(0,0,0,0.5);
}
.page-hero.wpsp-hero .wp-show-posts-inner p,
.page-hero.wpsp-hero .wp-show-posts-inner a {
    color: #fff;
}

Then edit the Header Element and in the Elements Classes field add: wpsp-hero

[Allen]

That’s definitely an interesting look. Thank you, David!

It looks like this solution is all custom css dependent. So there is no way to use the WPSP shortcode within the header Element interface itself, which offers many customizing options?

[David]

To do that without CSS – you would need to use WP Show Posts Pro.
It includes a Card Option that has overlay effects:

https://demos.wpshowposts.com/cards/

[Allen]

Ah! I didn’t know there was such a thing. I’ll check it out. Thanks David.

[David]

You’re welcome

[Author]

Posts