How to use `AvatarURL` or `FullAvatarURL` to display user avatars in templates?

In website operation, user avatar is not just a decoration, it carries the user's identity and is an important part of community interaction and personalized experience.Whether it is in the comment area, author introduction, or member center, a clear user avatar can significantly enhance the affinity and professionalism of the website.AnQiCMS as an efficient content management system naturally also provides us with the powerful function of flexibly displaying user avatars in templates.AvatarURLandFullAvatarURLThese fields easily let the user avatar leap to the screen.

---

The foundation for obtaining the user avatar:userDetailTag

In AnQiCMS, user avatar information is closely associated with specific user data. To get a user's avatar, we need to rely on the system's built-inuserDetailLabel. This label is specifically used to retrieve detailed information about a specified user, including their username, email, and of course, their avatar.

UseuserDetailThe most critical step when using the label is to specify the user'sidFor example, if you want to get the avatar of the user with ID 1,id="1"is an essential parameter. In practice, this user ID usually comes from the author ID of the current article (for example,archive.UserId）or the comment author ID (for exampleitem.UserId），so that we can dynamically retrieve different users' avatar information.

AvatarURLwithFullAvatarURL: Select the appropriate avatar path

when we successfully pass throughuserDetailThe label locates a user and then provides two main fields to help us display the avatar:AvatarURLandFullAvatarURLThey all point to the image address of the user avatar, but there is a subtle and important difference between them:

• AvatarURLIt usually returns arelative path. This means it may be similar to/uploads/avatars/user_123.jpg.This path is very convenient when used internally on your website, the system will automatically parse the complete URL based on your website's root directory.The advantages are that when your website domain name changes, these relative paths do not need to be modified.
• FullAvatarURLAs the name implies, it provides the avatar image.Complete absolute path. It will include the protocol, domain, and complete file path, for examplehttps://您的域名/uploads/avatars/user_123.jpgWhen you need to reference user avatars on external platforms (such as social media sharing) or ensure the integrity of the URL in specific scenarios,FullAvatarURLit would be a more secure choice.

In short, for the daily display inside the website,AvatarURLit is sufficiently convenient; while involving cross-domain or external references,FullAvatarURLit can ensure the accuracy of the links.

Apply in the template: Display user avatar

It's very intuitive to use these two fields to display the avatar in the template. We will use<img>the tag'ssrcThe URL to carry the avatar. At the same time, in order to avoid the appearance of 'broken images' on the page when the user has not set an avatar, we usually combineiflogical judgment to display a default avatar.

Assume we want to display the author's avatar on an article detail page:

{# 假设当前页面是文章详情页，并且可以通过archive.UserId获取作者ID #}
{% set authorId = archive.UserId %}

{# 获取作者头像的相对路径 #}
{% userDetail authorAvatarPath with name="AvatarURL" id=authorId %}

<div class="author-info">
    {% if authorAvatarPath %}
        <img src="{{ authorAvatarPath }}" alt="作者头像" class="author-avatar" />
    {% else %}
        {# 如果用户未设置头像，显示一个默认头像 #}
        <img src="/static/images/default-avatar.png" alt="默认头像" class="author-avatar" />
    {% endif %}
    <span class="author-name">{% userDetail authorName with name="UserName" id=authorId %}{{ authorName }}</span>
</div>

{# 如果您需要作者头像的完整绝对路径，可以这样做： #}
{% userDetail authorFullAvatarPath with name="FullAvatarURL" id=authorId %}
{% if authorFullAvatarPath %}
    <meta property="og:image" content="{{ authorFullAvatarPath }}" /> {# 例如用于社交媒体分享 #}
{% endif %}

In the above example, we firstarchive.UserIdto get the article author's ID, then useuserDetailto getAvatarURL.{% if authorAvatarPath %}Ensure that the user's uploaded avatar is displayed only when the avatar path exists; otherwise, a default avatar will be elegantly displayed by default.

Similarly, it's also simple to display user avatars in list loops. For example, showing the avatar of each comment author in a comment list:

”`twig {# Assume this is part of the comment list, item represents each comment #} {% commentList comments with archiveId=archive.Id type=“list” limit=“5” %}