Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Resolved] Position date bottom of column (cards)

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Position date bottom of column (cards)

Tagged: , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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.

    • This topic was modified 2 months, 1 week ago by Eivind.
    #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 🙂

    #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.)

    #19585
    Tom
    Keymaster

    Sorry about that, can you try the updated code?

    #19595
    Eivind
    Participant

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

    #19623
    Tom
    Keymaster

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

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

    • This reply was modified 2 months, 1 week ago by Eivind.
    #19656
    elvin
    Participant

    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.

    #19669
    Eivind
    Participant

    Thanks, that latest code snippet did the trick!

    Problem solved 🙂

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

    #19697
    elvin
    Participant

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

    • This reply was modified 2 months, 1 week ago by elvin.
    #19704
    Eivind
    Participant

    Perfect, thanks 🙂

    #19708
    elvin
    Participant

    No problem.:)

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.