[Support request] Horizontal blog cards

Home Forums Support Horizontal blog cards

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #866369
    Alvaro

    Hi,

    I was wondering if there’s a simple solution for having the archive layout as horizontal blog cards, similar to WP Show Posts cards row layout (but with the image always on the left)?

    Thanks.

    Álvaro

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #866524
    Leo
    Staff
    Customer Support

    Hi there,

    Just to make sure, you are wanting to use this layout for the blog page?
    https://www.screencast.com/t/CzXvTFIV

    Let me know 🙂

    #866561
    Alvaro

    Hi Leo,

    Yes, that’s the one. With smaller photos but that’s the layout: featured image on the left (no padding), title, meta, excerpt and read more button on the right, left aligned.

    Thanks.

    #866675
    Leo
    Staff
    Customer Support

    I actually did something similar recently:
    http://leohsiang.com/debate/

    Here are the settings to help you get started:
    https://www.screencast.com/t/2M52yREQjmww

    and this CSS:

    @media (min-width: 769px) {
        .post-image {
            max-width: 330px;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Once this is done, can you link me to the page in question and I’ll tackle the CSS to remove the featured image padding?

    Let me know 🙂

    #866960
    Alvaro

    Thanks Leo, I managed to do what you suggested: https://staging.plataformamulheres.org.pt/

    Just need a hand on the padding part… Oh, also, remind me how I force the images to be 200×200, with cropping.

    Thanks.

    #866998
    David
    Staff
    Customer Support

    Hi there,

    to force that image to fit the container will take a little more than CSS. To do this we need to add a wrap around the title, summary and meta. If you’re up for it start by doing this:

    Create 2 new Hook Elements.
    Both of their display rules should be the Blog and All Archives.

    First Hook – to open the wrap.
    Hook: before_content
    Priority: 20
    Hook Content:

    <div class="post-content-wrap">
    <!-- open wrap -->

    It will automatically add the closing </div> – delete it.

    Second Hook – to close the wrap:
    Hook: after_content
    Priority: 10 (default)
    Hook Content:

    <!-- close wrap --></div>

    Once they’re added i can help with some CSS to make the layout

    #867183
    Alvaro

    Hi David,

    Awesome. I just followed your lead and post-content-wrap is in place: https://staging.plataformamulheres.org.pt/

    Thanks.

    Next step?

    #867198
    David
    Staff
    Customer Support

    So before the CSS, can you change the blog featured image settings so they are default ie. image above title, centered and the size set to auto.

    The thing is the height of the container will change depending on the size of the title, summary and exceprt. Fixing them to 200px won’t work hence the need for them to be auto. I will then work on the CSS to create the layout you want.

    #867206
    Alvaro

    Done.

    Should I remove this CSS right now?

    @media (min-width: 769px) {
        .post-image {
            max-width: 200px;
        }
    }
    #867216
    David
    Staff
    Customer Support

    Yes, that can be removed. Try this CSS – see the line i have commented regarding how much width the image takes up. You should be able to see what i mean about keeping the image around 200px square doesn’t fill the height:

    .blog .inside-article,
    .archive .inside-article {
        padding: 0 !important;
        display: flex;
    }
    
    .blog .inside-article .post-content-wrap,
    .archive .inside-article .post-content-wrap {
        padding: 20px;
    }
    
    .blog .post-image,
    .archive .post-image {
        margin: 0 !Important;
        flex: 1 0 35%; /* Change this to adjust width image occupies */
        max-width: 100% !important;
    }
    
    .blog .post-image img,
    .archive .post-image img {
        object-fit: cover;
        height: 100% !important;
    }
    #867233
    Alvaro

    Done. (I just had a background-color and border-radius to the .blog .post-image class just to debug an issue with some images not being loaded, but that’s another matter.)

    So, what if we want to define a somewhat fixed height for this cards, to create some consistency, what’s our best option?

    Also, I’m having some issue with the page margins in narrower screen size.

    Thanks.

    #867251
    David
    Staff
    Customer Support

    Within this rule you can add a min-height: 250px;

    .blog .inside-article .post-content-wrap,
    .archive .inside-article .post-content-wrap {
        padding: 20px;
    }

    To apply some padding left and right specifically to archives you could do this:

    @media (max-width: 768px) {
        .blog #page, .archive #page {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }
    }

    Adjust the media query to suit

    #867353
    Alvaro

    Thank you David. You rock!

    Let me test things and I’ll get back here if I find myself in trouble.

    #867452
    David
    Staff
    Customer Support

    Glad we could be of help.

    #870670
    Alvaro

    Hi David,

    Is there a simple way to make the post-image work in smaller screens, maybe in the top of the card instead of the left side?

    Thanks.

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