[Support request] Grid layout with equal size grid

Home Forums Support [Support request] Grid layout with equal size grid

Home Forums Support Grid layout with equal size grid

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1645525
    manaadiar

    Hi there, I know GP has a grid layout, but when I use that or the masonry setting, the boxes are of different lengths because the post excerpt has different lengths.. How can i restrict the post excerpt length in the theme so that all boxes in the grid are the same height and also the title sometimes could be 2 lines or 3 lines..

    I want the title box and the excerpt boxes to be the same height..

    2) What code should I use to show each category as a grid box and not the latest posts.. Instead I want to show the Primary Category of the latest posts in each of the grids, which means the grids will change as the post categories change..

    I want it to look like https://blog.adobe.com/..

    #1645799
    David
    Staff
    Customer Support

    Hi there,

    first off Disable the Masonry option, then share a link to your site where i can see the columns and ill advise on how to make them the same height.

    #1645987
    manaadiar

    Hi David, here – https://www.shippingandfreightresource.com/.. Also let me know about the 2nd point of the Categories.. Thanks..

    #1646010
    Leo
    Staff
    Customer Support

    So are you wanting to move the Go to full article to the bottom of the post grid in each post?

    #1647294
    manaadiar

    Hi Leo, I want it like this https://blog.adobe.com/ where all the grids are the same size with fixed character limit in excerpts..

    #1647424
    Ying
    Staff
    Customer Support

    Hi there,

    Have you tried the layout > blog > archive > Excerpt word count?
    https://docs.generatepress.com/article/blog-content-layout/#archives

    Let me know 🙂

    #1647433
    manaadiar

    Hi Ying, that restriction is there, but doesn’t reflect on the page..

    #1647500
    Ying
    Staff
    Customer Support

    Just to be sure that the excerpts are not added manually at Post Editor > Screen Options > check Excerpt?
    Thanks!

    #1647681
    manaadiar

    It is manually added

    #1647687
    manaadiar

    Hi GP team, can someone help with this topic, has been going on for a few days.. I think I have explained the issue clearly as well.. Further to Ying’s comments above, I have removed manual excerpts from two of the posts and left it at 30 word count in layout options..

    But still the boxes are not of the same size because title, meta info could vary in size as per
    this image..

    I want the boxes to stay same size irrespective of the content inside (within the word count) like in this image from Adobe’s blog..

    Also I wanted 1 grid per category that I have so the home page shows each category in a box and not each post.. Pls help..

    #1647921
    David
    Staff
    Customer Support

    1. WordPress only filters the length of an automatic excerpt. Manual Excerpts will display whatever you add as their content. Aside of editing each manual excerpt, or removing them, you can try adding this PHP Snippet to trim Manual Excerpts.

    add_filter( 'get_the_excerpt', function( $excerpt, $post ) {
        if ( has_excerpt( $post ) ) {
            $excerpt_length = apply_filters( 'excerpt_length', 55 );
            $excerpt_more   = apply_filters( 'excerpt_more', ' ' . '[…]' );
            $excerpt        = wp_trim_words( $excerpt, $excerpt_length, $excerpt_more );
        }
        return $excerpt;
    }, 10, 2 );

    With that in place we can look at the rest of the layout – but your site is considerably different to Adobe so we many not able to replicate that exact look.

    2. Primary Category is not a feature of WordPress – I assume you’re using Yoast to generate the Primary Category ? If so – this is the only article i have found to GET their Primary Category for display purposes:

    https://www.tannerrecord.com/how-to-get-yoasts-primary-category/

    The author provides more detail in his GIST on how to get the category for displaying in a theme:

    https://gist.github.com/tarecord/4c7171b9955aee41d91db133af3e1d8f

    #1648341
    manaadiar

    Hi David, code for trimming the manual excerpts worked.. So now the excerpt will be same level, but if the title is 2 lines or 3 lines then the meta box alignment varies.. Can you pls have a look at the image and tell me how to align the meta box so it is on the same level.. Then everything will be fine – meta box will be same level as the next grid cell and the excerpts will be same line.. Only difference will be the heading..

    https://www.shippingandfreightresource.com/wp-content/uploads/gridsize1.png

    #1648363
    David
    Staff
    Customer Support

    Couple of things – first is to set a max/min height of the images and then force the containers to be the same height:

    @media(min-width: 769px) {
      .generate-columns .inside-article .post-image img {
        min-height: 150px;  
        max-height: 150px;
        width: auto;
      }
      
      .generate-columns:not(.featured-column) .inside-article {
        display: flex;
        flex-direction: column;
      }
    }

    Are you going to keep the Featured Column post ? As this complicates this design.

    Note you can reduce the space between images / title / summary by changing the Content Separator
    in Customizer > Layout > Container.

    #1648472
    manaadiar

    Hi David, i put the code in the CSS.. Post-images are not resizing to 150×150.. It is still maintaining original size..

    #1648948
    David
    Staff
    Customer Support

    Hmmm… that should work fine. But i updated the CSS above to make it a little more specific.

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