Custom Author Header

Hi there,

can you share a post where i can see the Element displaying the Author Description ?

Here is the post -

There isn't an element displaying on the page you've linked currently.

This usually means the display rule you've set is incorrect.

What display rules are you using?

Let me know :)

See now... Activated the author element.

Hi Amit,

I believe you can use the same header element you've used on the /nespresso/best/ on your author archive page.

On the same Header Element, add a display rule location for "Author Archives" so it's also used on author archive pages.

Elvin,
The author element is activated and it is set for 'Author Archives'. The problem is not the display rule, but the fields. The fields are not converting to what they are meant for - {{custom_field.description}}

Ah, in that case, consider this:

Create a new header element with similar styling but set the display rule for Author Archives.

And then add this PHP snippet.

add_shortcode('show_author_desc',function(){
if ( get_the_author_meta( 'description' ) && is_author() ) {
echo '<div class="author-info">' . get_the_author_meta( 'description' ) . '</div>';
}
});

This allows you to use the shortcode [show_author_desc].

On the newly created Header element, instead of using {{custom_field.description}}, use [show_author_desc] instead. :D

That worked!
Now the image that is showing on that page is square and the Author name is just stocked to it.
I need the author image to be a little small, round shaped with border around and some space within the author name and image.

You can wrap the image on that Header element with <div class="page-hero-gravatar"> the same way you did for the other Header element so they share the same styling. :)

Or just add this CSS for a quick and easy fix:

body.archive.author .page-hero img.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    margin: 0 10px 0 0;
}

Worked! A little tweak was required as the image was a little below the level of author's name. I added a margin of 15px at the bottom.
Please dual check from your side!

It looks fine on my end - https://share.getcloudapp.com/geuAx851

Do you need anything else? I believe this is sorted?

Let us know if you need further help with this. :D

Sorted!

Nice one. Thanks for letting us know. Glad you got it sorted. :D