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

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.

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.)

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;
}

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!

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.

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.

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

Hi there,

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

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.)

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.

Thanks David.

I replaced the css.

'No Background Image' was already the selection.

Unfortunately, the double image still appears...

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.

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?

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