Author avatar not showing

[sylvio-otercar]

Hi,

Struggling with showing the author avatar on my pages.

I want to have them as background images, rather than image-tags.

My code looks like this:

Spoiler

HTML
<div class="author-bio__card">

<div class="author-bio__avatar" alt="{{ blog_author.display_name }}"></div>

<div class="author-bio-card__text">
<h1 id="disp-name">{{ blog_author.display_name }}</h1>
<h4>{{ blog_author.bio }}</h4>
</div>

</div>

CSS
.author-bio__avatar {
height: 300px;
width: 300px;
background-image: url('{{ blog_author.avatar }}');
background-color: grey;
+ more stuff

}

Weird thing is that the author name and bio work fine, but I can't get hold of the avatar.. 😕

[GRajput]

Hi @sylvio-otercar 

Because you haven't you are not displaying author avatar. You need to add an <img> with author image src variable. Like this

{% if content.blog_author.avatar %}
        <img
          class="blog_author-img"
          src="{{ content.blog_author.avatar }}"
          width="{{ module.blog_settings.author_avatar_width }}" loading="lazy"
          alt="{{ module.blog_settings.default_texts.author_img_alt_text }}"
        >
      {% endif %}

"I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!"

[evaldas · Accepted solution]

Hi @sylvio-otercar 

In order for this to work, you will need to apply an in-line style for the background URL:

<div class="author-bio__avatar" alt="{{ blog_author.display_name }}" style="background: url('{{ blog_post_author.avatar }}')"></div>

You may need to change the blog_post_author.avatar to content.blog_post_author.avatar depending on your setup. 

The rest of the CSS can remain separate, but the background needs to be in-line.

Hope this helps!

[sylvio-otercar]

It worked out as an image and content.blog_post. Not exactly what I wanted, but it works hehe!

Thank you!

[sylvio-otercar]

I have tried that as well, but I still dont get it to work. Regardless of wether I use blog_post or content-blog_post, when I check on the div throught the web inspector, it still renders as background: url(' ');

The same also happens when I try to use an img tag too.

Spoiler

<img src="{{ content.blog_post_author.avatar }}" alt="{{ blog_author.display_name }}" class="blog-author-avatar_img">

Also here, the alt text shows up, but the picture doesnt. Very weird 😞