[Resolved] Author Image Next To Author Name Under Page Title

Home Forums Support Author Image Next To Author Name Under Page Title

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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=sharing

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

    #890120
    Leo
    Staff
    Customer Support

    Hi there,

    This should be a good starting point:
    https://docs.generatepress.com/article/entry-meta-style/

    Let me know πŸ™‚

    #890950
    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.

    #891175
    Tom
    Lead Developer
    Lead Developer

    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.

    #891182
    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' );
    #892002
    Tom
    Lead Developer
    Lead Developer

    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?

    #892009
    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;
    }
    #892326
    Tom
    Lead Developer
    Lead Developer

    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.

    #892675
    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.

    #892697
    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?

    #893064
    Tom
    Lead Developer
    Lead Developer

    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 );
    #893118
    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;
    }
    #893400
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #893472
    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

    #893486
    Tom
    Lead Developer
    Lead Developer

    Wow, thank you so much! That’s super generous of you – I appreciate it! πŸ™‚

    Glad I could help!

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