Is it possible to show author image like this?

Hi, I would like to show the author image and name near the comment and views count in all posts (all posts type, formats and designs) but not in pages. Something like this one, see the image: http://i0.wp.com/ss-img.styzic.com/2014/08/Capture.png

I know you guys can do this. Thanks 🙂

???

Please reply fast! Asap..

Thanks Lucian for the reply.
If not the image I would like to add at least the author’s name, like: “By Lucian”
I’ve seen that on many sites and I don’t think that’s that hard to require a thing like custom work. 😉

Here’s the image: It’s still there on Photon. http://i0.wp.com/ss-img.styzic.com/2014/08/Capture.png

and I would like to show it like the image I gave 🙂

Okay, here’s the new one 🙂 The one ike in the image will look good and professional too.
http://ss-img.styzic.com/2014/08/Capture.png

In a child theme, copy and edit the single_template_#.php that you’re using for your posts. (Note that for template 1, this is in loop-single-1.php instead.)

Near the top you will find a series of lines like this:

<div class="meta-info">
                    <?php echo $td_mod_single->get_category();?>
                    <?php //echo $td_mod_single->get_author();?>
                    <?php echo $td_mod_single->get_date(false);?>
                    <?php echo $td_mod_single->get_commentsAndViews();?>
                </div>

Try turning them into something like this:

<div class="meta-info">
                    <?php echo $td_mod_single->get_category();?>
                    <?php echo $td_mod_single->get_date(false);?>
                    <?php echo $td_mod_single->get_date(false);?>
                    <?php echo get_avatar($post->post_author, '40');?>
                    <?php echo $td_mod_single->get_author();?>
                    <?php echo $td_mod_single->get_commentsAndViews();?>
                </div>

Notes:

1. If you don’t have a child theme yet, you can test this in the theme editor by changing Newspaper’s own files, but make sure you backup the file

2. ’40’ is 40px, the width and height of the avatar image. Change to whatever you want

3. I haven’t tested the get_avatar function with an author ID — in the tagDiv files the parameter is the user email. If it doesn’t load the avatar, replace $post->post_author with get_user_by('id', $post->post_author)->user_email or something similar

4. You can style the avatar and user name to be right aligned by looking at the comments and views css and imitating that. Try echoing a <div> with a class like my_author_meta around those two echo statements, and then style that in the custom CSS panel

Just a thought and not tested. Let me know how it works.

This was just what I needed. Works perfectly but designing the css will be difficult task for me. It already has a span class and display in the middle not right or left.

Lets see if the theme MAKERS can help! Thanks to TheMediumUTM

I’ll be digging into it tommorow!

I tried doing it and it works as expected but I messed things with my css. I need the css to do it like the demo image I’ve provided. 🙂

Waiting…

TagDiv support is very helpful and patient and gave you the uncomment get_author advice a couple of times… the rest is just stuff I’ve learned by reading the files and some PHP and CSS tips when I was in your position two weeks ago. You don’t need everything spelled out for you :p

For positioning CSS elements you have a few options. The way the comments and views are done is by using position: absolute;, which allows you to specify the distance from the edges of the container by using top: 0px;, left: 0px;, and so forth. Your div’s class could use something like that.

Thanks that’ll be enough. 🙂

Actuall I know nothing about css or anything so I’m gonna leave it as it is.

I tried .abc { position:absolute; top: 0px; left: 0px; right: 0px;} but still useless.

I can do it myself I need codes that I should insert and done! 😛

Try top: auto; bottom: 0px; and right: 50px; (Still haven’t implemented this on my site for testing, so not sure.) Then modify right: to something else.

If I keep right to something fixed like 50px, then the author’s name (if long) will overlap or remain in middle (if short). That’s not pretty good.

Also there are different blocks so every block should have different div…. confusing!

Steal the position: absolute; from entry-comments-views and give it to your custom class:

header .entry-comments-views {
  position: static !important;
}

.my_avatar_box {
  position: absolute;
  top: auto;
  bottom: 0px;
  right: 0px;
}

Now that’s the one that’s pushed up against the right side and has the text flow naturally inside it. So echo that around both the new statements and the call to get_commentsAndViews:

<?php echo '<div class="my_avatar_box">';?>
<?php echo get_avatar($post->post_author, '16');?>
<?php echo $td_mod_single->get_author();?>
<?php echo $td_mod_single->get_commentsAndViews();?>
<?php echo '</div>';?>

Note that for a cleaner author output, you could do this for the third line instead:

<?php echo '<a itemprop="author" href="' . get_author_posts_url($post->post_author) . '">' . get_the_author_meta('display_name', $post->post_author) . '</a>';?>

Which I just grabbed from the function get_author in the theme files, and dropped the “by” and the dash on either side.

You have to promise me that you’re learning from this experience :p

Wow it works… and I’ll remember the last line 😛
Love and thanks 🙂

Welcome!

🙂