Align published date (and images)

Hi there,

This is quite tricky to do because of the title text length variation on the top part and the content text length variation on the bottom.

While we can do something about aligning the date together, it will affect the alignment of the post image because the bottom contents will be the next issue.

consider trimming your excerpt so we can at least worry only for the post image and the header contents.

ok i see, let’s do this.
“trimming the excerpt” : if I make sure the excerpt is always in 2 lines, I guess it’ll work too?
If yes, what will be the css for your solution?
Thanks for the help I really appreciate!

It’s a PHP snippet rather than a CSS.

Check this:
https://wpshowposts.com/support/topic/excerpt-length-not-working/#post-25661

Or this PHP snippet:

add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
    $output = $excerpt;
    if ( has_excerpt() ) {
        $output = sprintf( '%1$s <p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>',
            wp_trim_words( $excerpt, 2, '...' ),
            get_permalink(),
            __( 'Read more', 'generatepress' )
        );
    }
    return $output;
}

Hi!
Thanks for your answer! It works for limiting the excerpt.

But the alignments (of the dates and images) are still not working. The main issue is because the title can be in 1 or 2 lines (and i don’t want to cut it).
Alignment is more a CSS matter?
Or maybe there is a php way to make sure the container for the title will be 2 lines?

Thanks for your help and time,

The problem with that is it simply won’t be enough for every scenario.

Some titles can be 3 lines long so us forcing the heading to have 2 lines worth of fixed height won’t suffice.

I’ll consider doing the following:

– Change where the post meta is displayed. (above the title or below the content)
– Modify the HTML structure with hooks.
– Apply fixed height to the header. Example: –

h2.wp-show-posts-entry-title {
    height: 120px;
}

– Apply a javascript to programmatically calculate the height of the tallest title and match it with the smaller ones. (custom script. out of our scope, unfortunately.)

Hi there,

Thanks for the advices!
Concerning the hooks, filters and modifying the html structure, Im actually not really sure what to do since I use a shortcode for displaying WP Show post.
In the premium version, are there more options or it’s way easier?
(I will for sure take the premium version for my next websites. Since I’m almost done with this one, Im wondering what it will do with all the custom I made)

For now, I actually set up the height with the css, and changed it depending on the display size. Not the best solution but it is somehow “reponsive”.

• This reply was modified 3 years, 6 months ago by judev.

Concerning the hooks, filters and modifying the html structure, Im actually not really sure what to do since I use a shortcode for displaying WP Show post.

You use hooks and filters even when you’re using the shortcode as these directly deal with how the WPSP list outputs its HTML structure.

In the premium version, are there more options or it’s way easier?

You’ll have to do the same thing with the premium version. The premium version focuses more on styling rather than functionalities. Hooks don’t have an endpoint within the UI.

For now, I actually set up the height with the css, and changed it depending on the display size. Not the best solution but it is somehow “reponsive”.

Scripting would make it fully responsive but this may come with on performance as I’m not sure if Google PSI or lighthouse will mark it as CLS.

Thanks mate for your detailed answer!
I am going to use this solution until I have some time to implement a JS custom solution.

Also, I was wondering if it’s possible to create an interactive post filter (by category)?
(I saw you advised to use filterizr but I was wondering if it’s now possible to do it with WPSP: https://www.ads-software.com/support/topic/post-grid-with-filter-by-custom-post-type/ )

Also, I was wondering if it’s possible to create an interactive post filter (by category)?

It’s possible but that currently is outside of our scope of support as it’ll require a significant amount of customization.

But Tom’s actually looking at it. There are plans to add it to WPSP Pro. ??