Position date bottom of column (cards)

Tagged: column, date, position

This topic has 12 replies, 3 voices, and was last updated 3 years ago by elvin.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
September 17, 2020 at 6:05 am #19471
Eivind
Participant
I’m using Base as card style, and I want to position the date at the bottom of the columns. Currently, the title spans over 1-3 lines for different posts which results in the date not being aligned at the bottom.

This is what I want to achieve: https://ibb.co/kS4wpmB
URL: https://coinpanda.io/blog/

I did already try this CSS which did nothing:
```
.wp-show-posts-inner {
	display: flex;
	flex-direction: column;
	height:100%;
	box-sizing: border-box;
}

.wp-show-posts-entry-title {
        padding-bottom: 50px;
	flex:1;
}

.wp-show-posts-entry-date {
	margin-top:auto;	
}
```
Second question:
Is it possible to disable URL/link in the date?
(this could be a nice settings feature)

I’m using WPSP 1.2 alpha + WPSP Pro 1.0 beta5.
September 17, 2020 at 2:59 pm #19513
Tom
Keymaster
Hi there,

Try adding this:
```
#wpsp-10324 .wpsp-content-wrap {
    height: 100%;
}

#wpsp-10324  .wp-show-posts-entry-header {
    height: 100%;
    display: flex;
    flex-direction: column;
}
```
For the date, update to 1.2.0-alpha.2: https://wpshowposts.com/wp-show-posts-1-2-0/

Then do this:
```
add_filter( 'wpsp_date_output', function( $output, $settings, $time_string ) {
    if ( 123 === $settings['list_id'] ) {
        return sprintf(
            '<span class="wp-show-posts-posted-on wp-show-posts-meta">
                %s
            </span>',
            $time_string
        );
    }

    return $output;
}, 10, 3 );
```
Let me know 🙂
September 17, 2020 at 11:42 pm #19539

Eivind
Participant

Hey,

CSS for aligning the date worked perfectly!

As for the filter, it returned this on the frontend:
“Warning: Illegal string offset ‘list_id’ in …/public_html/wp-content/themes/generatepress_child/functions.php on line 108”, where line 108 is
if ( 123 === $settings['list_id'] ) {

(I assume I should replace 123 with the list id found in the shortcode which I did, for example 10324.)

September 18, 2020 at 1:32 pm #19585

Tom
Keymaster

Sorry about that, can you try the updated code?

September 18, 2020 at 1:53 pm #19595

Eivind
Participant

That simply removed the date from all cards. Even from other lists than specified.

September 18, 2020 at 5:33 pm #19623

Tom
Keymaster

Ugh, basic coding mistake – my fault. Latest code should be good to go.

September 18, 2020 at 11:48 pm #19627

Eivind
Participant

Tried the latest code, but each date is still a link. So no different than when not adding the code.

I did replace 123 with one of my list ids. Cleared cache as well.

September 20, 2020 at 4:15 pm #19656
elvin
Moderator
Hi,

You can try this instead.
```
add_filter( 'wpsp_date_output', function( $output, $settings, $time_string ) {
    if ( 78 === (int) $settings['list_id'] ) {
        return sprintf(
            '<span class="wp-show-posts-posted-on wp-show-posts-meta">
                %s
            </span>',
            $time_string
        );
    }

    return $output;
}, 10, 3 );
```
Had to fix the condition. Just replace the 78 with your list ID.

I’ve tested this on my sandbox site. Let us know if it works for you.
September 20, 2020 at 10:52 pm #19669

Eivind
Participant

Thanks, that latest code snippet did the trick!

Problem solved 🙂

September 21, 2020 at 3:08 am #19678

Eivind
Participant

Oh, last question:

Is it possible to apply this function for multiple lists using one single code snippet? I tried to separate several list id’s separated by a comma, but that returned an error.

September 21, 2020 at 12:54 pm #19697

elvin
Moderator

Oh its because you need PHP’s ||/”Or” operator.

You’ll have to do something like this.

if ( 77 || 78 || 79 || 80 === (int) $settings['list_id'] )

This means “77” or “78” or “79” or “80”.

September 21, 2020 at 1:19 pm #19704

Eivind
Participant

Perfect, thanks 🙂

September 21, 2020 at 1:40 pm #19708

elvin
Moderator

No problem.:)
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

[Resolved] Position date bottom of column (cards)