Alignment of Meta data – WP Show Posts

Tagged: Alignment of meta date and tags

This topic has 9 replies, 2 voices, and was last updated 1 year, 4 months ago by elvin.

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

Author

Posts
June 27, 2021 at 8:21 am #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

June 27, 2021 at 8:34 am #31498

Louis
Participant

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

June 27, 2021 at 5:12 pm #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;
}
```
June 27, 2021 at 5:55 pm #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.)

June 27, 2021 at 9:03 pm #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.

June 27, 2021 at 9:46 pm #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);
```
June 27, 2021 at 9:51 pm #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

June 27, 2021 at 10:58 pm #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 );
} );
```
November 10, 2021 at 3:08 am #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?

November 10, 2021 at 5:46 pm #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.
Author

Posts

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

You must be logged in to reply to this topic.

[Support request] Alignment of Meta data