[Support request] Horizontal blog cards

[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

[Leo]

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 🙂

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

[Leo]

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 🙂

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

[David]

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

[Alvaro]

Hi David,

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

Thanks.

Next step?

[David]

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.

[Alvaro]

Done.

Should I remove this CSS right now?

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

[David]

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;
}

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

[David]

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

[Alvaro]

Thank you David. You rock!

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

[David]

Glad we could be of help.

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

[Author]

Posts