Author Image Next To Author Name Under Page Title

[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=sharing

Note: The category “home and living” is currently being pulled from yoast breadcrumbs. But i am not SUPER tied to them.

[Leo]

Hi 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/

[Simon]

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.

[Tom]

Hi 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-development

[Simon]

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' );

[Tom]

Just 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-development

[Simon]

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;
}

[Tom]

Awesome, 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-development

[Simon]

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.

[Simon]

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?

[Tom]

1. 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-development

[Simon]

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;
}

[Tom]

That’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-development

[Simon]

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,
Simon

[Tom]

Wow, 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

[Author]

Posts