Image vertical alignment on blog column layout

Hi there,

yeah theres a few ways - any chance you can link me to a page where i can see it and provide the CSS for it.

Hey David. I have updated the original post with a test link.

Ok in this instance as the excerpt is also variable in length there is no automatic method of achieving it without messing with JS. This means you have to give the title a fixed height. Such as this method:

h2.entry-title {
    line-height: 2.5ex;
    height: 7.5ex; /* 3 x Line-height = 3 lines */
    overflow: hidden;
}

This will force the entry-title to 'occupy' 3 lines regardless of how many it is.
Any more then 3 lines and its overflow is hidden.

In addition you can use this to get the footer meta to align nicely:

.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
}

.generate-columns .entry-summary {
    margin-bottom: 2em;
}

.generate-columns footer.entry-meta {
    padding-top: 2em;
    margin-top: auto;
}

Hmmm. Ok yeah, it makes sense. Still looks ugly with three single line title posts all in a row. What's the logic behind a JavaScript solution? Also, is there a PHP filter I could use to truncate the post title based on number of letters?

Hmmm... try this CSS instead:

.generate-columns .inside-article {
    display: flex;
    flex-direction: column;
}

.generate-columns .entry-header {
    margin-bottom: 1em;
}
.generate-columns .post-image {
    margin-top: auto;
}
.generate-columns .entry-summary {
    line-height: 2.5ex;
    height: 15ex; /* 6 x Line-height = 6 lines */
    overflow: hidden;
}

What? That's amazing!

One thing, David. On my local install, I actually have the read more text as buttons. I activated it for the test site as well but now the read more buttons are hidden. What's the best way for this?

Thought i would turn the problem on its head :)

Evolving that to include the readmore and to keep them aligned, we can do 2 things:

1. Increase the height of the entry-summary to accomodate the readmore and make it a flex column as well.
2. Add auto margins to the readmore

Which gives you this:

.generate-columns .inside-article,
.generate-columns .entry-summary {
    display: flex;
    flex-direction: column;
}

.generate-columns .entry-header {
    margin-bottom: 1em;
}
.generate-columns .post-image, 
.read-more-container {
    margin-top: auto;
}
.generate-columns .entry-summary {
    line-height: 2.5ex;
    height: 20ex; /* increase height to accomodote read more */
    overflow: hidden;
}

Amazing stuff, David! You are a CSS wizard! I can definitely work with that. Thank you for your detailed work. Time to revisit Flexbox, for me, I reckon!

You're welcome :)