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

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

Home Forums Support Full Width Featured Image on a Custom Page for a Specific Category?

Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #1578912
    Tom
    Lead Developer
    Lead Developer

    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.

    #1579128
    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?

    #1579646
    David
    Staff
    Customer Support

    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.

    #1579813
    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!

    #1579884
    David
    Staff
    Customer Support

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

    #1580113
    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.

    #1580463
    David
    Staff
    Customer Support

    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

    #1580528
    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?

    #1581334
    David
    Staff
    Customer Support

    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/

    #1581367
    Allen

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

    #1581732
    David
    Staff
    Customer Support
Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.