Home › Forums › Support › Issues getting full length featured post above grid (padding and longer excerpt)
- This topic has 11 replies, 2 voices, and was last updated 3 years, 8 months ago by David.
-
AuthorPosts
-
June 28, 2020 at 1:34 am #1344224Joey
I am putting a full-width featured post at the top of my blog page, with the image to the left and the text to the right, on top of three columns. I set the width of the photo to what would be about 2/3 of the container width on full screen. See here: https://simipress.com/home/ There are a couple issues:
1. Is it possible to make the excerpt twice as long as the other posts (on desktop) since it has so much white space? I can add it manually every time I add a new post but that is a lot of work.
2. How can I adjust the font size and style of the title and excerpt of only the featured post? I want to make the title and excerpt larger and bolder. Again, only on desktop.
3. Is it possible to make the padding of the title and excerpt greater than that of the thumbnail images (on all posts on the blog)? I used to be able to uncheck “display padding around images” but that only works when I align the images to center.
Thanks.
June 28, 2020 at 8:29 am #1344592DavidStaffCustomer SupportHi there,
1. Try this PHP Snippet:
add_filter( 'excerpt_length', function( $length ) { global $wp_query; if ( 0 === $wp_query->current_post && !wp_is_mobile() ) { // Set Length of first post on desktop $length = 50; } else { // Set Length of other posts and all posts on mobile $length = 20; } return $length; }, 200);
This should set the first post to 50 on desktop only. All other posts to 20. Change accordingly.
2. && 3. Try this CSS:
@media(min-width: 769px) { .featured-column h2.entry-title { font-size: 40px; font-weight: 900; } .featured-column .entry-summary { font-size: 20px; } .separate-containers .featured-column .post-image { margin-top: -10px !important; margin-left: -10px; margin-bottom: -20px !important; } .separate-containers .featured-column .post-image img { vertical-align: bottom; } }
June 28, 2020 at 7:20 pm #1344964JoeyDavid,
That worked awesome, thank you. The only issue is when I do a screen size between 1000px and 1100px, the title gets split, and half of it goes to the next line. Is there a way to keep the title together? (it all moves or nothing moves)? See the issue here: https://simipress.com/wp-content/uploads/2020/06/example.jpg
If it is a big pain, no worries.
I didn’t explain well about the padding, sorry:
I’d like to fix the padding on all the images of the blog and category pages, not just the featured image. I’d like the excerpt to have more padding (be thinner) than the thumbnail image above it, in mobile and desktop both. For example, https://www.colorlines.com/
June 29, 2020 at 1:41 am #1345163DavidStaffCustomer SupportYou can try this to adjust the width of the featured post image so the full title / excerpt remains floated right for more screen sizes:
@media(max-width: 1100px) and (min-width: 960px) { .post-image-above-header .inside-article div.post-image { max-width: 66%; } }
Aside of re-doing some of the above, what happens if you set the image to center and remove the padding in the customizer settings? Would be simpler to fix just the featured post
June 29, 2020 at 3:20 pm #1346276JoeyLet me make sure I’m understanding you. If I set the image to center for all posts and remove the padding in customizer settings, that does the trick for all the posts. This is how I originally had it. But now my featured post will have the image centered rather than having the photo on the left and the title/excerpt on the right. Is there a simple code to make the featured post align left when the rest are centered?
This code:
@media(max-width: 1100px) and (min-width: 960px) { .post-image-above-header .inside-article div.post-image { max-width: 66%; } }
works like a charm for keeping the title together on the featured post. But it is also making the images on non-featured posts smaller, and pulling them to the left. It does the same even when I center-align all posts.
June 30, 2020 at 1:17 am #1346588DavidStaffCustomer SupportScrap that CSS – and add this instead:
@media(min-width: 769px) { .separate-containers .featured-column .post-image img { max-width: 66%; float: left; margin-right: 2em; } .separate-containers .featured-column .inside-article { padding-bottom: 0; } }
June 30, 2020 at 4:18 am #1346767JoeyThank you David, that works perfect and it’s starting to look really good. I would never have figured that out on my own. I really appreciate it.
June 30, 2020 at 5:38 am #1346848DavidStaffCustomer SupportGlad to be of help 🙂
July 18, 2020 at 7:44 pm #1368226JoeyDavid there is one bug with this code (that makes the first post have a longer excerpt) that I hadn’t noticed
add_filter( 'excerpt_length', function( $length ) { global $wp_query; if ( 0 === $wp_query->current_post && !wp_is_mobile() ) { // Set Length of first post on desktop $length = 50; } else { // Set Length of other posts and all posts on mobile $length = 20; } return $length; }, 200);
I have pages on my blog, so it also makes the first post on subsequent pages have 50 characters. Page 2, 3, 4, etc. don’t have a featured post, so it screws with the layout of those subsequent pages. Is there a way to make the longer length only affect page one? Sorry to bring back an old topic.
July 19, 2020 at 3:34 am #1368469DavidStaffCustomer SupportTry changing this:
if ( 0 === $wp_query->current_post && !wp_is_mobile() ) {
to
if ( 0 === $wp_query->current_post && !wp_is_mobile() && !is_paged() ) {
July 19, 2020 at 8:22 pm #1369137JoeyFixed it. Thanks a lot.
July 20, 2020 at 2:13 am #1369355DavidStaffCustomer SupportGlad to be oh help
-
AuthorPosts
- You must be logged in to reply to this topic.