[Resolved] Issues getting full length featured post above grid (padding and longer excerpt)

Home Forums Support Issues getting full length featured post above grid (padding and longer excerpt)

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1344224
    Joey

    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.

    #1344592
    David
    Staff
    Customer Support

    Hi 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;
        }
    }
    #1344964
    Joey

    David,

    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/

    #1345163
    David
    Staff
    Customer Support

    You 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

    #1346276
    Joey

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

    #1346588
    David
    Staff
    Customer Support

    Scrap 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;
        }
    }
    #1346767
    Joey

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

    #1346848
    David
    Staff
    Customer Support

    Glad to be of help 🙂

    #1368226
    Joey

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

    #1368469
    David
    Staff
    Customer Support

    Try changing this:

    if ( 0 === $wp_query->current_post && !wp_is_mobile() ) {

    to

    if ( 0 === $wp_query->current_post && !wp_is_mobile() && !is_paged() ) {

    #1369137
    Joey

    Fixed it. Thanks a lot.

    #1369355
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.