We're merging with GenerateBlocks! Learn more here.

[Support request] Alignment of Meta data

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Alignment of Meta data

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #31496
    Louis
    Participant

    Hello!

    I’m grappling a little with the layout of meta data on https://www.sahpa.co.za (under General Notices)

    I’d like each card to be arranged as follows (this is a rough edit):
    https://www.sahpa.co.za/wp-content/uploads/2021/06/Screenshot-2021-06-27-at-17.00.08.png

    1. Image on top, with 5px border radius on top
    2. Heading
    3. Date (aligned left) Tag (aligned right)

    Then, I’d also like the Tag to not be a link, the code snippet I’ve found in one of the other threads doesn’t work. If you perhaps know of a solution for this?

    Best, most appropriate example I’ve found so far is on https://frugalflyer.ca/ – I just can’t replicate this.

    warm regards, and thank you!

    Louis Stanford
    Cape Town, South Africa

    #31498
    Louis
    Participant

    Just one more thing: I’d also like no margin between image and the card edge.

    #31505
    elvin
    Moderator

    Hi there

    For #1: Try adding this CSS:

    #wpsp-1234 .wp-show-posts-inner {
        border-radius: 20px 20px 0 0;
        overflow: hidden;
    }

    Replace 1234 is the WPSP id you wish to apply this on.

    For #2: I’m not sure what you mean. Can you explain a bit more? Do you want to add more spacing to the bottom?

    For #3:
    Go to specific WPSP Meta Tab setting and make sure both of them is set to the same location/position. Either “below post” or “below title”.

    You then add this CSS:

    #wpsp-1234 .wp-show-posts-entry-meta {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    Replace 1234 is the WPSP id you wish to apply this on.

    Just one more thing: I’d also like no margin between image and the card edge.

    You have this CSS that adds space between the container’s edge and the image. It’s the padding.

    .wp-show-posts-inner {
    	
      padding-left: 20px;
    	padding-right: 20px;
    	padding-top: 20px;
    	padding-bottom: 20px;
    	border-style: solid;
    	border-width: 1px;
    	border-color: #e6e6e6;
    	border-radius: 5px;
    	box-shadow: 2px 8px 20px 1px #e6e6e6;
    	max-width: 720px;
    	margin: auto;
    	display: flex;
      flex-direction: column;
    }

    remove the padding on this CSS and add this:

    .wp-show-posts-inner > *:not(.wp-show-posts-image) {
        margin: 0 20px;
    }
    #31507
    Louis
    Participant

    This is great, I’m making progress, thank you!

    You wrote: “Go to specific WPSP Meta Tab setting and make sure both of them is set to the same location/position. Either “below post” or “below title”.” Tags are currently not included as an option in WPSP Meta, so the only one I can set is Date. No change to layout… any ideas?

    Also, if I enable “Include Terms” then my website gets a critical error:
    https://www.sahpa.co.za/wp-content/uploads/2021/06/Screenshot-2021-06-28-at-02.49.42.png

    (If you want to troubleshoot this particular bug, you have admin access – I’m going to bed now (it’s 3am), you’re welcome to test as no-one will be using the site for the next few hours.)

    #31509
    elvin
    Moderator

    Also, if I enable “Include Terms” then my website gets a critical error:
    https://www.sahpa.co.za/wp-content/uploads/2021/06/Screenshot-2021-06-28-at-02.49.42.png

    (If you want to troubleshoot this particular bug, you have admin access – I’m going to bed now (it’s 3am), you’re welcome to test as no-one will be using the site for the next few hours.)

    That’s not the default behavior.

    Are you using any PHP snippets for the meta?

    Can you try disabling all plugins except WPSP to check for any plugin conflict? Let us know.

    #31511
    Louis
    Participant

    I found the offending code! It was this code snippet (to remove links from tags) that I added yesterday:

    add_filter( 'wpsp_terms_output', function( $output, $settings ) {
        return sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
            strip_tags( get_the_term_list( get_the_ID(), $settings[ 'taxonomy' ], '', apply_filters( 'wpsp_term_separator', ', ' ) ) )
        );
    } ,15 ,2);
    #31513
    Louis
    Participant

    Next step:
    I see that the Category shows on the right side of the WPSP card. I’d like the Category hidden, and the Tag to display, and without a link. Do you perhaps have a suitable code snippet at hand?

    Warm regards

    #31515
    elvin
    Moderator

    You can still salvage that code while setting it to display tag instead of category.

    Try this.

    add_filter( 'wpsp_terms_output', function( $output ) {
    	$output = sprintf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
    				get_the_term_list( get_the_ID(), 'post_tag', '', apply_filters( 'wpsp_term_separator', ', ' ) )
    			);
    	return strip_tags( $output );
    } );
    #35369
    Louis
    Participant

    I have one last request on this thread: the meta tags and date float depending on the length of the Post title. What is the flex approach to aligning to the bottom of the card?

    #35397
    elvin
    Moderator

    Try this CSS:

    header.wp-show-posts-entry-header {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }
    
    .wp-show-posts-entry-meta.wp-show-posts-entry-meta-below-title {
        margin-top: auto;
    }

    But since the cards are very narrow, you may get issues w/ entry metas word wrapping.

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