Adding Avatar next to Byline

Jo cuthza. You’ll need to modify one theme file so you should be using a child theme. If you’re not, here’s how to get one:
1. In Theme Options click the Help tab in the upper righthand corner.
2. One of the options in the list is to download a sample child theme. This downloads the theme zip file to your local computer.
3. Install the new theme in your Admin panel by selecting Add New > Upload Theme > Choose File, then select the zip file you downloaded.
4. Activate the child theme.
You’ll now have a pre-configured child theme with a style.css file and functions.php file to which you can add customizations.

To add the author avatar to the post byline:

1. Copy single.php from the parent theme to your child theme.

2. Near the top of single.php in your child theme find these two lines:

<h1 class="post-title"><?php the_title(); ?></h1>
<p class="post-byline"><?php _e('by','hueman'); ?> <?php the_author_posts_link(); ?> · <?php the_time(get_option('date_format')); ?></p>

3. Add a line between them to get the author avatar:

<h1 class="post-title"><?php the_title(); ?></h1>
<p class="byline-avatar"><?php echo get_avatar(get_the_author_meta('user_email'),'128'); ?></p>
<p class="post-byline"><?php _e('by','hueman'); ?> <?php the_author_posts_link(); ?> · <?php the_time(get_option('date_format')); ?></p>

4. Add the following to your child theme style.css file:

/* position avatar next to post byline */
.single .byline-avatar {
    float: left;
    margin: 0 10px 10px 0;
    width: 64px;
    height: auto;
    position: relative;
}
/* make byline avatar a circle */
.single .byline-avatar img {
    width: 100%;	/* adjust size of image if needed */
    height: auto;
    float: left;
    margin-right: 10px;	/* adjust space around image */
    border-radius: 50%;
    -webkit-shape-outside:circle();
    shape-outside:circle();
}
/* push byline down to center vertcally on avatar */
.single .post-byline {
    margin-top: 30px;
}

Let me know if you have any questions.

You are a hero! This works perfectly.

One thing, on mobile it seems to behave erratically, showing on one author but not the other author.

Are there any special settings for mobile themes that need to be updated?

The same code is used for all viewport widths. Not sure what would be causing that.

Are you sure its on single.php?

I don’t see it. Thanks

Hi cujoo. Welcome to the Hueman forum. This thread is almost a year old and refers to a version of the theme that is no longer supported. The theme has changed substantially since that time. The lines of code mentioned in step 2 above are now in file parts/single-heading.php. But even that is not the same as the second line noted in step 2 has also been replaced by a call to another template file, parts/single-author-date.php. However, if you make the change noted in step 3 to file parts/single-heading.php, I believe it should still work.

Just a suggestion. In the future, if you have a question regarding a topic that is more than a couple of weeks old, I’d recommend you start a new topic and add a reference to the old topic. That will ensure your question gets added to the top of the forum queue. Adding a comment to an old thread like this one does not push it to the top of the queue.

Thanks bdbrown. Sure I will do. Yes as you mentioned I noticed it on single-author.php.
I changed it and its showing now.

Thanks a lot