- This topic has 14 replies, 3 voices, and was last updated 1 year, 8 months ago by
Tom.
-
AuthorPosts
-
May 5, 2019 at 4:11 pm #890009
Simon
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 #890120Leo
StaffCustomer SupportHi there,
This should be a good starting point:
https://docs.generatepress.com/article/entry-meta-style/Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 6, 2019 at 10:48 am #890950Simon
Ok, 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 #891175Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 6, 2019 at 4:52 pm #891182Simon
I 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 #892002Tom
Lead 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?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 7, 2019 at 9:09 am #892009Simon
Yeah 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 #892326Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 8, 2019 at 4:16 am #892675Simon
Oohhh 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 #892697Simon
Oh 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 #893064Tom
Lead 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 );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 8, 2019 at 9:25 am #893118Simon
Yay!!! 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 #893400Tom
Lead 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 8, 2019 at 3:49 pm #893472Simon
Wah! 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 #893486Tom
Lead DeveloperLead DeveloperWow, thank you so much! That’s super generous of you – I appreciate it! π
Glad I could help!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.