[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 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1575089
    Allen

    I’m trying to use GPP to build a news website that has a custom home page with a full width header, a “top story” using a full width featured image under the header, but then have the story’s headline/description/meta CONTAINED underneath the featured image.

    I understand how to use WP Show Posts short code to designate stories by category to a location (including a category I’m calling “Featured Story” to get that top full-width featured image/story to show up there).

    I also understand how to create the full width featured image on a specific archive page or on a post.

    What I can’t figure out how to use WP Show Posts to get a designated category’s post to show in that top spot under the header with a full width image and the content contained below that featured image!

    (Closest I’ve gotten so far is a full width image with the story content at full width, too.)

    Does that make sense? And can it be done?

    Thank you!

    #1575153
    Elvin
    Staff
    Customer Support

    Hi,

    I’m not sure I understand what you mean.

    To clarify: Since you’ve already able to display the full width image on the top of the page, you simply want to “contain” it’s content? Something like this? https://share.getcloudapp.com/DOuo25zb

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1575160
    Allen

    Yes, that’s the most fundamental thing I’d like to do: to get the image full width but the story content contained to 1100 max.

    (Additionally, if there is a way to use WP Show Posts and still put the headline over the featured image but have the description/meta below that, like the hero image setups allow, that’s even better.)

    #1575193
    Elvin
    Staff
    Customer Support

    Yes, that’s the most fundamental thing I’d like to do: to get the image full width but the story content contained to 1100 max.

    (Additionally, if there is a way to use WP Show Posts and still put the headline over the featured image but have the description/meta below that, like the hero image setups allow, that’s even better.)

    Do you mean something like this? https://share.getcloudapp.com/12uKAp89

    If so, Try adding this CSS:

    #wpsp-592 .wp-show-posts-inner {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    
    #wpsp-592 .wp-show-posts-inner .wp-show-posts-image {
        margin-left: calc(-100vw / 2 + 100% / 2);
        margin-right: calc(-100vw / 2 + 100% / 2);
        max-width: 100vw;
        width: auto;
    }
    
    #wpsp-592 .wp-show-posts-inner header.wp-show-posts-entry-header {
        position: absolute;
        top: 40px;
    }

    And then edit the WP Show Post list to change the title’s color to white if you’re using the Pro version.

    IF not, add this CSS:

    #wpsp-592 .wp-show-posts-inner header.wp-show-posts-entry-header h2 a{
        color: white;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1575225
    Allen

    Thanks Elvin, but that’s not exactly what I’m asking.

    I understand that I can constrain the specific shortcode’s headline/description/meta with css (although what you’ve graciously provided also affects the image size and some other layout pieces as well).

    I’m wondering more if there is a way to use WP Show Posts interactively on a custom page just like its used in the hero image setups that already exist for posts/pages.

    Example, kind of like the following prior support topic, but instead of using ‘most recent post’ it’s the most recent of a specific category: https://generatepress.com/forums/topic/how-to-use-element-header-to-display-feature-image-and-title/

    (I’ve also read this support post, but they lose me half way through on the tech side and the design isn’t quite the same: https://generatepress.com/forums/topic/header-herowith-featured-post-on-top-of-blog-page/ )

    If what I’m asking about is too much, no worries; I can certainly play with the css to get just the content portion constrained below a full sized image. I just wanted to see if there was a more robust way to mimic the page hero functions in combination with WP Show Posts.

    Thank you!

    #1575229
    Allen

    Sorry, I jumped the gun on your css. It does not affect the image size. I was seeing that in the admin, but it works after publishing.

    And I will certainly use a version of that short term. But I’d still love to know if there was a better page hero option.

    Thanks Elvin.

    #1575545
    Elvin
    Staff
    Customer Support

    I’m not sure I’ve fully gotten the whole idea.

    I see that your site has multiple WPSP lists labeled for each categories.

    To clarify further: You want each of these lists to display in order of the most recent post under their specific categories(ex.akron, city governments, corporate media)?

    If so, WPSP Pro has a feature that lets you display posts from specific taxonomy (on Posts tab) and in order of most recent among the set taxonomy (on More Settings tab).

    But I believe you’re already doing his for all the list?

    As for the page hero option, you can simply use the Header Element and add your WPSP shortcode in it instead of placing it in as a Block Element and hooking it to generate_after_header.

    A wise man once said:
    "Have you cleared your cache?"

    #1575894
    Allen

    I’m focused exclusively on creating a hero image on a custom home page using WPSP to show 1 post from a specific category of posts.

    Your very last instruction isn’t something I considered. So I added the WPSP category shortcode [wp_show_posts id=”592″] into ‘Insert script to head’ of a header element.

    But doing that doubles up the featured image, as you can currently see on the home page. (A full-sized feature image loads behind the hero.)

    I removed the css you provided to see if that had any effect, but it does not. (It just unconstrains the content.)

    But this is moving in the right direction of what I’m trying to accomplish: some way to use the WSPS shortcode as the content of a page hero…

    #1576248
    David
    Staff
    Customer Support

    Hi there,

    the link in your original topic is coming up as Not Found ? Can you share the correct URL.

    #1576716
    Allen

    Sorry for the delay. It is active on the homepage now. (This is a brand new site, just setting it up. Not much traffic thus far.)

    #1577201
    David
    Staff
    Customer Support

    Remove the existing CSS that you have.
    And in the Header Element remove the Background Image.

    Then try this CSS:

    #wpsp-592 .wp-show-posts-inner >*:not(.wp-show-posts-image) {
        max-width: 1200px;
        padding-left: 40px;
        padding-right: 40px;
        margin-left: auto;
        margin-right: auto;
    }
    #wpsp-592 .wp-show-posts-image img {
        width: 100%;
    }

    The first CSS property will contain all of the WPSP content apart from the Image to 1200px + 40px padding to match your content.

    Then the last piece just forces the image to 100% wide.

    Just need to style the WPSP content now.

    #1577550
    Allen

    Thanks David.

    I replaced the css.

    ‘No Background Image’ was already the selection.

    Unfortunately, the double image still appears…

    #1578345
    David
    Staff
    Customer Support

    Thats odd. Can you try adding a background image – a different one to what is displayed. If the background changes, can you then go and remove the background image.

    #1578496
    Allen

    I added a background image to the ‘Home Page Hero Image’ header element. The added background image did not appear; instead, the double-up of the featured image for that post remained.

    I also tried both a custom image and a featured image. No luck.

    I also selected ‘Disable Featured Image’ in the header element with an image selected. No luck.

    I also turned off Smush plugin just in case that was causing an issue. No luck.

    Perhaps the use of a Category short code alone [wp_show_posts id=”592″] to ‘Insert script to head’ for this header element is not the proper way to go?

    #1578776
    Allen

    FYI, I just created a brand new header element for videos. The featured image from that new header element is now in place behind/below the custom ‘Home Page Hero Image’ element. lol

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.