[Support request] How to add photo to author box

[Sarina]

I am trying to add an author box with the code given below added as an element (hook)
I like this method because it has schema added but I would like to skip the gravatar photo and use my own uploaded to the media library. How do i do this?

<?php echo get_avatar( get_the_author_meta( ‘ID’ ), 250 ); ?>

<p class=”author-title” itemprop=”author” itemscope itemtype=”http://schema.org/Person”&gt;
<span itemprop=”name”><?php printf( esc_attr__( ‘Author: %s’, ‘the author’ ), get_the_author_meta( ‘display_name’) );?></span>
</p>

<p class=”author-description”><?php echo wp_kses( get_the_author_meta( ‘description’ ), null ); ?></p>

Css used
.author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.author-box .avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
h5.author-title {
margin-bottom: 0.1em;
font-weight: 600;
}
.author-description {
line-height: 1.6em
}
.author-links a {
margin-top: -1.5em;
font-size: 2em;
line-height: 2em;
float: left;
}

@media (max-width: 768px) {
.author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
flex-direction: column;
text-align: center;
}
.author-box .avatar {
margin-right: 0;
width: 100%;
margin-top: -25px;
}
.author-box .avatar img {
max-width: 100px;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}

Alternatively you can give also give a method to add schema to your method on youtube (https://www.youtube.com/watch?v=HMhUo91RjsE) for person.

[Fernando]

Hi Sarina,

You can definitely add a schema through this method: https://www.youtube.com/watch?v=HMhUo91RjsE

You’ll need to use a filter called render_block.

Can you create the Author Box first? After doing so, let us know which specific element you wish to add the schema on to. We’ll assess which code is needed afterward.

[Sarina]

Thanks for replying

Let me try this.

[Sarina]

Figured it out. Thanks

[Fernando]

Great. Would you still need the code?

If so, can you share the link where we can see the Author box? Let us know which Block you want the schema added to.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Sarina]

I do need the code to add schema – I thought I solved it by adding html marker on the field for the author name but it is not working that way – it is not being recognised by schema validator.

[David]

Hi there,

i cannot see the author box on the URL provided, can you confirm the URL ?

[Sarina]

The author box is there on my side – is it the cache? Can you try again?

[Fernando]

Hi Sarina,

I can’t seem to locate the Author Box from my end as well.

Perhaps we’re seeing a cached instance of your site? Can you try clearing all caching mechanisms set in your site?

Check if your server has caching too.

[Sarina]

I am having a problem with display of the author box on pages using this method. I much prefer the hook method, except for it using the gravatar photo. How to disable gravatar photo and add from the image library? or disable gravatar for all comments. That is my question

[David]

Hi there,

in your hook method you have this line:

<?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>

Which is what prints out the avatar.
You can replace that line with some HTML to display tour image eg.

<img width="100" height="100" src="the_url_to_the_image" alt="your_alt_text">

[Sarina]

When i tried this on a staging site, it messed up the layout – the photo in a different box and the words on top, seperately. So afraid to use it on the site.

[David]

Oh, i missed the class from the image:

<img class="avatar" width="100" height="100" src="the_url_to_the_image" alt="your_alt_text">

Try that, and the it should pick up the other CSS.

[Sarina]

Yes, it is working now. Thanks
Can there be a difference in the speed /performance between using the block method and the hook method?

[David]

No difference at all.
The block method would simply write the code for you.
Using a static image does improve performance vs using a gravatar.

[Author]

Posts