How to use `AvatarURL` or `FullAvatarURL` to display a user avatar in the template?

In website operation, the 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 website's亲和力 and professionalism.AnQiCMS as an efficient content management system naturally also provides us with the powerful function of flexibly displaying user avatars in templates.Today, let's talk about how to use in AnQiCMS templateAvatarURLandFullAvatarURLThese fields make it easy for the user's avatar to jump onto the screen.

The foundation for getting the user's avatar:userDetailTag

In AnQiCMS, the user avatar information is closely associated with specific user data. To obtain a user's avatar, we need to rely on the system's built-inuserDetailThe tag 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 creating a tag is to specify the user.idFor example, if you want to get the avatar of a user with ID 1,id="1"is a necessary parameter. In practice, this user ID usually comes from the author ID of the current article (for example,archive.UserIdOr the ID of the comment author (for exampleitem.UserId), so we can dynamically retrieve the avatar information of different users.

AvatarURLwithFullAvatarURL: Choose the appropriate avatar path

When we successfully pass throughuserDetailAfter the label locates a user, it 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 yet important difference:

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

In short, for the daily display within the website,AvatarURLit is sufficiently convenient; however, when it comes to cross-domain or external references,FullAvatarURLit can ensure the accuracy of the links.

Apply in the template: Display user avatar

Using these two fields to display the avatar in the template is very intuitive. We will use<img>label'ssrcAn attribute to carry the avatar URL. To avoid the page displaying a broken image when the user has not set an avatar, we usually combineiflogical judgment to display a default avatar.

Suppose 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 first obtain the article author's ID byarchive.UserIdThen useuserDetailtags to retrieveAvatarURL.{% if authorAvatarPath %}Ensure that the user's uploaded avatar is displayed only when the avatar path exists, otherwise, it will gracefully degrade to display a preset default avatar.

Similarly, it is also simple to display user avatars in a loop in the list. For example, displaying the avatar of each comment author in a comment list:

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