[Resolved] Add author photo for each post in blog home

Home Forums Support Add author photo for each post in blog home

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #334790
    Clément

    Hello, how can I edit the blog home template to add the author photo in each post just like on this page https://blog.intercom.com/

    Thanks,

    GP Premium 1.3
    #334793
    Leo
    Staff
    Customer Support
    #334805
    Clément

    Thanks Leo but that not what I want 🙂 I knwo how to add a photo but i want the photo on the meta in blog home page

    Just like you can see in the bottom of blog post card in home blog page of intercom
    https://blog.intercom.com/

    I think I have some code to add in content.php but I don’t know wich code and I don’t know if content.php is the right file.

    Thanks,
    Clément

    #334806
    Leo
    Staff
    Customer Support

    What code are you adding?

    #334808
    Clément

    I have add nothing for the moment because I don’t know what to add.

    Take that page, http://demo.generatepress.com/ get the .entry-meta then the .author .vcard and finally the .author-name

    I want to add just in the right of the author name his avatar.
    I think I have a code like “<?php echo get_avatar( $id” to add in blog template (I mean the blog home not blog single post)
    And I dont knwo where to add it in wich file.

    I don’t know if I’m clear :/

    #334842
    Tom
    Lead Developer
    Lead Developer

    Are you wanting it to be at the bottom of the post as well, or at the top just with the gravatar?

    #335037
    Clément

    One the top 🙂

    #335202
    Tom
    Lead Developer
    Lead Developer

    Something like this would add it in:

    add_filter( 'generate_post_author_output', 'tu_add_author_gravatar' );
    function tu_add_author_gravatar() {
    	printf( ' <span class="byline">%1$s</span>',
    		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s %5$s<a class="url fn n" href="%2$s" title="%3$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%4$s</span></a></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() ),
    			get_avatar( get_the_author_meta( 'ID' ) )
    		)
    	);
    }

    Then you would have to style the image with the available CSS classes.

    Let me know if you need more info 🙂

    #335346
    Clément

    It’s ok thanks ! 🙂

    #335368
    Tom
    Lead Developer
    Lead Developer
    #406566
    gedosan

    New to GP and loving this forum!

    So I got the above working, but with limited CSS skills the author pic sits in between ‘by’ and ‘author’.

    so looks like this…

    by IMAGE author

    Any way to make the ‘by’ shift to the right so the image is first? Or have the ‘by author’ sit below the IMAGE?

    Cheers

    #406568
    gedosan

    Don’t worry, figured it out…

    added to the pic:

    float: left;
    margin: 0px 15px 20px 0px;

    How about making the pic round? Can we do that in CSS too – or better to make the actual image round? (using gravitar)

    Cheers

    #406570
    gedosan

    Apols, need to do more research before I go asking!

    It’s border-radius: 50%;

    Cheers!

    #406574
    Leo
    Staff
    Customer Support

    Glad you god them all 🙂

    #406589
    gedosan

    Actually there is one little thing: So I have the author name to the right of the pic now, and would like to move it down so its in line with the bottom of the pic. I can’t seem to target the author name class though to do it.

    Cheers

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