- This topic has 14 replies, 3 voices, and was last updated 4 years, 10 months ago by Tom.
-
AuthorPosts
-
May 5, 2019 at 4:11 pm #890009Simon
Hey All,
Just been playing around with some designs for Author Images in the post meta area and wanted to know if something like this is possible and if so, if you can point me in the direction of some starting points for how to get there.
https://drive.google.com/file/d/1od7q-n5SDwF-4jKZjkTJuPKUEsdxr4Mr/view?usp=sharingNote: The category “home and living” is currently being pulled from yoast breadcrumbs. But i am not SUPER tied to them.
May 5, 2019 at 8:55 pm #890120LeoStaffCustomer SupportHi there,
This should be a good starting point:
https://docs.generatepress.com/article/entry-meta-style/Let me know π
May 6, 2019 at 10:48 am #890950SimonOk, awesome that was too easy.
Couple things.
1. How do i get it to only show on the post, and not in the category archives.
2. Mine does not seem to stack like the example. But I cant seem to figure out why? It’s also not in the centre anymore…
Lastly, any thoughts on what I need to do to get it to look like the image i attached? Just a basic understanding of how i should best go about that.
May 6, 2019 at 4:42 pm #891175TomLead DeveloperLead DeveloperHi there,
How are you adding the breadcrumbs currently? Can you share your code? We’ll likely need to combine that code with the filter and do some structural changes to achieve that layout.
May 6, 2019 at 4:52 pm #891182SimonI used the Yoast Shortcode:
hook (in: before_entry_title):<div class="breadcrumbs">[ wpseo_breadcrumb ]</div>
This is also removing the page title from the end of the breadcrumbs if that make a difference:
function remove_breadcrumb_title( $link_output) { if(strpos( $link_output, 'breadcrumb_last' ) !== false ) { $link_output = ''; } return $link_output; } add_filter('wpseo_breadcrumb_single_link', 'remove_breadcrumb_title' );
May 7, 2019 at 8:59 am #892002TomLead DeveloperLead DeveloperJust to confirm, are you using the second function on this page?: https://docs.generatepress.com/article/entry-meta-style/
Any edits made to it?
May 7, 2019 at 9:09 am #892009SimonYeah exactly. I just double checked and its exactly the same except for the small edits i made. (The date text was in the wrong position before these too).
I only took out the A tag from the date. The whole php snippet looks like this:
add_filter( 'generate_post_author', '__return_false' ); add_filter( 'generate_post_date_output', function( $date ) { printf( '<span class="meta-gravatar">%s</span>', get_avatar( get_the_author_meta( 'ID' ) ) ); echo '<span class="meta-data">'; printf( ' <span class="byline">%1$s</span>', sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><span class="author-name" itemprop="name">%3$s</span></span>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ), esc_html( get_the_author() ) ) ); echo $date; echo '</span>'; } );
And I also changed some of the CSS. made the image width 50px, removed these:
.byline { font-weight: 700; } .entry-meta .meta-data .posted-on { font-size: 0.8em; }
Added This:
.entry-meta .author-name { color: #222222; }
May 7, 2019 at 4:51 pm #892326TomLead DeveloperLead DeveloperAwesome, can we try this as your function?:
add_filter( 'generate_post_author', '__return_false' ); add_filter( 'generate_post_date_output', function( $date ) { echo '<div class="meta-area-1">'; printf( '<span class="meta-gravatar">%s</span>', get_avatar( get_the_author_meta( 'ID' ) ) ); printf( ' <span class="byline">%1$s</span>', sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><span class="author-name" itemprop="name">%3$s</span></span>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ), esc_html( get_the_author() ) ) ); echo '</div>'; echo '<span class="meta-area-2">'; echo $date; if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } echo '</span>'; } );
And this as your CSS?:
.entry-meta { display: flex; } .meta-area-1 { display: flex; align-items: center; border-right: 1px solid #ddd; padding-right: 5px; margin-right: 5px; } .meta-area-1 img { width: 50px; border-radius: 50%; margin-right: 10px; } .meta-area-2 { display: flex; flex-direction: column; } .meta-area-2 .posted-on { margin-top: auto; margin-bottom: auto; }
It will need some more tweaking, but this should get us closer.
May 8, 2019 at 4:16 am #892675SimonOohhh yeah, this is definitely on the right path.
If the date wasn’t all the way over there on the left, we would be in business… Any idea why it’s doing that?
Also, it is still showing author info in the categories? I originally just had the updated date in there.
May 8, 2019 at 5:01 am #892697SimonOh wait. I figured it out!
I was using this to remove the link from the updated date:
add_filter( 'generate_post_author_output','tu_no_author_link' ); function tu_no_author_link() { printf( ' <span class="byline">%1$s</span>', sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>', __( 'by','generatepress'), esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ), esc_html( get_the_author() ) ) ); } add_filter( 'generate_post_date_output','tu_remove_date_link', 10, 2 ); function tu_remove_date_link( $output, $time_string ) { printf( '<span class="posted-on">%s</span>', $time_string ); }
So just a couple small adjustments:
1. how do i centre align them? I am currently using a margin hack as the text align wont work:.single .entry-meta { text-align: center; margin-left: 31%;
2. What is the best way to just have the date on the archives (no author info).
3. I would still like to remove the updated date link?May 8, 2019 at 8:43 am #893064TomLead DeveloperLead Developer1. Adjust your
.entry-meta
CSS to this to center it:.entry-meta { display: flex; justify-content: center; }
2. Try this:
.archive .meta-area-1 { display: none; }
3. Just the link while keeping the text? If so, update your function to this:
add_filter( 'generate_post_author', '__return_false' ); add_filter( 'generate_post_date_output', function( $date, $time_string ) { echo '<div class="meta-area-1">'; printf( '<span class="meta-gravatar">%s</span>', get_avatar( get_the_author_meta( 'ID' ) ) ); printf( ' <span class="byline">%1$s</span>', sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author"><span class="author-name" itemprop="name">%3$s</span></span>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ), esc_html( get_the_author() ) ) ); echo '</div>'; echo '<span class="meta-area-2">'; printf( '<span class="posted-on">%1$s</span>', // WPCS: XSS ok, sanitization ok. $time_string ); if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } echo '</span>'; }, 10, 2 );
May 8, 2019 at 9:25 am #893118SimonYay!!! This looks AWESOME.
Seriously Tom, you are the actual best.
Thank you so very much for all your help on this.
I have never even heard of “justify-content” I think I need to take a refresher CSS course!
One last thing, on the archive pages, the updated date was centered. I have added this and it fixed it, but I don’t know if thats completely wrong use of this justify-content business.
.archive .entry-meta { justify-content: flex-start; }
May 8, 2019 at 1:57 pm #893400TomLead DeveloperLead DeveloperThat’s perfect.
justify-content
is used with flexbox, which is somewhat new. You may want to run your code through this tool depending on your browser compatibility needs: https://autoprefixer.github.io/Glad I could help π
May 8, 2019 at 3:49 pm #893472SimonWah! That thing is awesome. I actually ended up removing more redundant CSS than I added, and i am more browser compatible! Who knew webkit-border-radius was redundant? not me thats for sure.
This was very helpful and educational. Thanks Tom.
I only now discovered I can donate money to the project!!! So did so. Even still I promise I wont bug you for at least anther month π
Cheers,
SimonMay 8, 2019 at 4:04 pm #893486TomLead DeveloperLead DeveloperWow, thank you so much! That’s super generous of you – I appreciate it! π
Glad I could help!
-
AuthorPosts
- You must be logged in to reply to this topic.