- This topic has 25 replies, 4 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
December 10, 2020 at 5:21 pm #1575089Allen
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!
December 10, 2020 at 6:42 pm #1575153ElvinStaffCustomer SupportHi,
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.
December 10, 2020 at 6:50 pm #1575160AllenYes, 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.)
December 10, 2020 at 7:16 pm #1575193ElvinStaffCustomer SupportYes, 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; }
December 10, 2020 at 7:48 pm #1575225AllenThanks 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!
December 10, 2020 at 7:55 pm #1575229AllenSorry, 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.
December 11, 2020 at 1:38 am #1575545ElvinStaffCustomer SupportI’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
.December 11, 2020 at 5:21 am #1575894AllenI’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…
December 11, 2020 at 7:55 am #1576248DavidStaffCustomer SupportHi there,
the link in your original topic is coming up as Not Found ? Can you share the correct URL.
December 11, 2020 at 1:55 pm #1576716AllenSorry 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.)
December 12, 2020 at 3:35 am #1577201DavidStaffCustomer SupportRemove 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.
December 12, 2020 at 8:03 am #1577550AllenThanks David.
I replaced the css.
‘No Background Image’ was already the selection.
Unfortunately, the double image still appears…
December 13, 2020 at 4:26 am #1578345DavidStaffCustomer SupportThats 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.
December 13, 2020 at 6:47 am #1578496AllenI 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?
December 13, 2020 at 9:14 am #1578776AllenFYI, 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
-
AuthorPosts
- You must be logged in to reply to this topic.