[Resolved] Image vertical alignment on blog column layout

Home Forums Support Image vertical alignment on blog column layout

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1191427
    George

    I have a 3 column blog layout with title, image and info at the bottom. Some titles are longer than others spanning multiple lines. As a result, some images get pushed down messing up the thumbs’ vertical alignment. Is there a way to have the images always vertically aligned independently of the title length of the posts?

    #1191666
    David
    Staff
    Customer Support

    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.

    #1192081
    George

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

    #1192129
    David
    Staff
    Customer Support

    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;
    }
    #1192178
    George

    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?

    #1192213
    David
    Staff
    Customer Support

    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;
    }
    #1192289
    George

    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?

    #1192593
    David
    Staff
    Customer Support

    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;
    }
    #1193134
    George

    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!

    #1193529
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.