Linking to an image file for the avatar in authors.yml

[lionpeloux]

I am having a hard time understanding how to link to a relative image file in the .authors.yml as described in the help here. In the docs, a web url (avatar: https://github.com/squidfunk.png) is used so it is not useful to understand in my case how to set up this path.

My .authors.yml file is under docs/blog/.authors.yml as suggested in the docs. My avatar is under docs/blog/assets/avatar/ldupeloux.jpg.

I tried many paths in the .authors.yml , but never get a chance to make it work for both the blog index and post page, and for both local mkdocs serve and mkdocs build (I am using build with offline plugin enabled).

I also noticed that I have to define the path to the.authors.yml as authors_file: ./blog/.authors.yml, that is relative to the site root, and not to the blog_dir as explained in the docs [here}(https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/?h=authors_file#+blog.authors_file). Indeed, If i define it to authors_file: ./.authors.yml mkdocs complains that the author ldupeloux could not be found.

How should I specify the avatar path ? Relative to the site root ? Relative to the .authors.yml ? And what about the authors_file ?
Many thanks for your help. I'am quite confused about how it is working, despite all my readings, searching, and tests !

ldupeloux:
  name: Lionel du Peloux
  description: Habitat Individuel
  # avatar: ./../../../../../blog/assets/avatar/ldupeloux.jpg
  # avatar: ./blog/assets/avatar/ldupeloux.jpg
  avatar: ./assets/avatar/ldupeloux.jpg

[kamilkrzyskow]

As stated in the documentation "This property must point to a valid image URL, internal or external, and is used as part of posts and excerpts as the author's avatar." So you have to provide the https:// link to that image, as it's not post-processed / validated to adjust the path for each page, but instead is input as provided into the Jinja2 template:
<img src="{{ author.avatar }}" alt="{{ author.name }}">

mkdocs-material/material/blog-post.html

Lines 22 to 36 in cf7ca44

	{% if page.authors %}
	<div class="md-post__authors md-typeset">
	{% for author in page.authors %}
	<div class="md-profile md-post__profile">
	<span class="md-author md-author--long">
	<img src="{{ author.avatar }}" alt="{{ author.name }}">
	</span>
	<span class="md-profile__description">
	<strong>{{ author.name }}</strong><br>
	{{ author.description }}
	</span>
	</div>
	{% endfor %}
	</div>
	{% endif %}

So in other words:
https://yourdomain.com/blog/assets/avatar/ldupeloux.jpg or perhaps https://yourdomain.com/assets/avatar/ldupeloux.jpg as I'm not sure if the blog/ part is included in a blog-exclusive website.

[squidfunk]

Correct. We should probably allow to resolve relative paths, though. Please create a new issue with a bug reporting and a minimal reproduction, so we can fix it! 😊

[sidravi1]

Hi! Was this issue ever created? I can't seem to find it. If not, I'd be happy to.

[madjxatw]

It hasn't yet created, I would be happy to see this feature supported.

[madjxatw]

I encountered the same issue when referencing an avatar image with a relative path on local filesystem, but not sure it should be categorized as a bug or lack-of-feature.

I have a pure blog structure as suggested at https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/?h=blog#blog-only, and my avatar image file is at docs/assets/images/avatar.png.

In my .authors.yml, the avatar image is referenced as the path relative to .authors.yml, i.e. assets/images/avatar.png. However, the generated post pages are located in a <YEAR>/<MONTH> multi-level directory where the path to the avatar image file is not actually resolved.