[Support request] Add Class to Featured Post, Two or More Featured Posts on the Blog

Home Forums Support [Support request] Add Class to Featured Post, Two or More Featured Posts on the Blog

Home Forums Support Add Class to Featured Post, Two or More Featured Posts on the Blog

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1522084
    Vlidi

    Hi GP team, and thank you once again for all the great stuff!

    I have a question re: the Featured Post function on the Blog page, that is actually two:

    – How can I add class to Featured Post so I could target and style that part of the Blog template (especially the Featured Post Image) separately?
    I think I have seen this solved here before, but even Google search can’t find it now.

    – Related: can we have several “Featured Posts” on the Blog page?

    Say, scenario 1: the latest post of each category/taxonomy included in the Blog archive to be displayed as “Featured”?
    Or, scenario 2: each 5th post in, say, 3-column masonry grid, to be displayed as “Featured”?

    I am trying to get close to this layout.

    I am curious about the GP solution for this if possible, and will ask separately on the WPSP forum for the WPSP Pro advice.

    Thanks! 

    #1522785
    David
    Staff
    Customer Support

    Hi there,

    you can Make the first Post Featured in Customizer > Layout > Blog:

    https://docs.generatepress.com/article/using-columns-in-the-blog/

    Then the simplest way to style the posts would be some CSS like this:

    .generate-columns-container .post:nth-child(5n) {
        width: 66.66667%;
    }

    This will set every 5th post in the list to a width of 66.66667%

    Note the order of the posts will change if the Masonry option is enabled, as this uses Javascript to fill the available space.

    #1522841
    Vlidi

    Hi David, and thank you very much – this CSS works to widen the grid of every Xth post, and masonry scales accordingly.

    However, I believe you misunderstood my first question – I understand how to make the first post featured, but my question was how can I add class to it so I can style it differently from the other posts on the Blog page.

    Also, I was curious if there is a way for the latest post of each category/taxonomy included in the Blog archive to be displayed as “Featured”?

    Thanks once again for such a great support!

    #1522902
    Vlidi

    Hey David sorry, now I got it – the Featured Post can be targeted with:

    .generate-columns-container .featured-column (.whatever-other-selector)
    {your CSS values here;}

    Thanks!

    Now only the last question remains:

    Is there a way for the latest post from each category/custom taxonomy included in the Blog archive to be displayed as “Featured”?

    Thank you!

    #1522938
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The GP featured post option should target the first post in the list automatically. Are you displaying multiple lists of posts on one page?

    #1522971
    Vlidi

    Hi Tom.

    In this case I have 5-6 custom taxonomies instead of regular categories, and all go to Blog Page chronologically as they come.
    I was wondering if it is possible that the latest post from each taxonomy be displayed as Featured Post whenever it arrives, and then let the masonry pack them however it can on the Blog Page.

    The layout I am after should be similar to this, and the Featured Post would ideally be the latest from the said taxonomies.

    Thank you!

    #1523678
    David
    Staff
    Customer Support

    Can you share a link to your ‘blog’ page so we can see how the Loop is laying down those posts ?

    #1524212
    Vlidi

    Sure, it is below!
    And thanks so much!

    LiteSpeed Cache and PhastPress are deactivated, so all catching should be off.

    They have used CPT UI to register two CP types and create 6 and 7 taxonomies respectivelly.
    All is fed chronologically to the Blog Page, which is also Home.

    The idea is to display the latest post from any of the 6 taxonomies from the one of the CP types (“Sadržaj”) as “Featured Post” whenever it arrives and let the masonry calculate the layout.

    I am sorry for the mess there, it is the staging site for the journal I am redoing for friends.
    I have just started removing plugins and figuring out stuff, but have to make do with the taxonomies I inherited as they have a ton of articles already.

    I am aware that this can be a bit out of your way, so I am grateful for whatever you can or can not do!

    #1524370
    Vlidi

    Hey guys, Stop the Press! 🙂

    Doesn’t matter these custom taxonomies now, it would be a great feature to have, but there is something essential that I need to solve first.

    I have realized I have a bigger problem as I am not sure how to serve the featured images to the Blog now.

    The Blog/Archive layout looks good even with “random” (each 5th) posts displayed as Featured using David’s CSS. But the images of the Featured Posts get upscaled from what is set for the Blog layout, and it looks very bad.

    I have set the regular Blog images to 500 X 300 using the GP documentation:
    https://docs.generatepress.com/article/adding-image-sizes

    Adjusted a bit with CSS and media queries and it performs fantastic! The entire Blog page weights something like 600kb and loads in less than a second.

    But when they get upscaled to the “Featured” size, the images look awfully low-res.

    Now if I boost the size in Customizer to, say, medium_large, it looks okay but the performance gets a hit, and the page gets seriously penalized in benchmarks.

    So: Is there any way to serve the my-archive-featured-image size as set in Customizer to all the “Regular” posts on the 3-column blog page (33,3%), BUT to serve GP medium_large size to whatever post gets displayed as “Featured” in 66.66% ?

    Thanks!

    #1524485
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You could try something like this:

    add_filter( 'generate_page_header_default_size', function( $size ) {
        global $wp_query;
    
        $current_post = $wp_query->current_post + 1;
    
        if ( $current_post % 5 == 0 ) {
            return 'medium_large';
        }
    
        return $size;
    } );

    $wp_query->current_post starts at 0, so that’s why we + 1 at the start so it makes more sense. In the code above, we set every 5th post to use that different image size.

    Let me know 🙂

    #1524591
    Vlidi

    Thanks a million, almost there, but not working yet!

    1. If I don’t remove +1 then the very first post doesn’t get the medium_large image.

    2. Some math doesn’t work with David’s CSS, as it misses the “Featured Posts” set by CSS (they remain small, my-archive-featured-image) but serves the medium_large image size to some other thumbnails that are not “Featured”.

    Perhaps because the CSS doesn’t really start with “featuring” from the 5th post for some reason, but from the 3rd.

    Please just take a look, and you will understand immediately.
    (The parameters are in the box below.)

    Surely it is only the matter of math, but I can’ figure it out.

    Thanks so much once again for all the help!

    #1524962
    David
    Staff
    Customer Support

    Try udating this line:

    .generate-columns-container .post:nth-child(5n) {

    to

    .generate-columns-container .post:nth-child(5n+1) {

    Note: The visible order with masonry is not necessarily the actual order.

    #1525474
    Vlidi

    Thanks!

    Now it works much better.
    The “Featured Posts” as set by CSS do get served with medium_large thumbnails.
    So on the initial Blog Page screen everything matches.

    However, the two problems remain:

    1. How to adjust the Tom’s code so that he very first Featured Post (the one set in Customizer) gets also served the medium_large size? It only gets the larger size if I remove the +1 from the code, but then the rest falls apart.

    2. All this works only for the initial Blog Page screen; all the posts after the “Load More” button start losing count, and we are back to the problem of wrong sizes in the wrong places (I use infinite scroll).

    The only exception to the rule is if the number of Posts as set in Reading Settings can be divided by 5.
    Any way to remedy this besides not using infinite scroll?

    This layout proves a bit harder to solve than I would expect.

    Thank you once again for all the help!
    You guys are amazing.

    #1525592
    David
    Staff
    Customer Support

    1. Have you enabled the Make first post featured in the Customizer > Layout > Blog ?
    2. That CSS seems to be working correctly for me – but the issue is the loading does leave some blank spaces in the masonry grid. Whats the issue with setting the settings to 10 posts in the Reading Settings ?

    #1525686
    Vlidi

    Hey David,

    1. Yes, Make first post featured is enabled in the Customizer, but Tom’s code starts serving the larger image size from the first “Featured” post as defined by your CSS, and NOT from the very first Featured Post (the one set in Customizer). So that one stays low-res.

    (Removing the +1 from his code serves the proper size to that one post but then misses all the other CSS-defined “featured” posts.)

    It would be great to adjust the code so that the very first Featured post (the one set in Customizer) also gets served the medium_large size image.

    2. The problem here is that is seems to work on any defined number of posts only if infinite scroll is not in use, but pagination.

    If infinite scroll is in use, the code works correctly only if the number of posts can be divided by 5. Otherwise, all the posts after the Load More button get served the wrong sizes.

    So with 10 posts defined, it works quite okay.
    But if you want 16, or 23, it gets messed up.
    It is a bit tricky to figure out the proper layout of posts – the least occurence of awkward blank spaces – when limited to 10, or 15, or 25.

    I guess it is a Masonry problem.

    I would be quite happy if we can solve the No 1 above.
    No 2 – I can live with that, now I redefined the numbers to 6 and use 24 posts.
    But it would be great to know if it is solvable at all 🙂

    Thank you for such a great support!

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