--- title: Displaying avatars in transformations related: - https://docs.kentico.com/k11/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md - https://docs.kentico.com/k11/community-features/avatars/changing-user-avatars.md - https://docs.kentico.com/k11/community-features/avatars/changing-group-avatars.md - https://docs.kentico.com/k11/community-features/avatars/using-gravatars.md --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). ## User avatars User avatars can be displayed in [transformations](https://docs.kentico.com/k11/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md) using one of the following methods: - **GetUserAvatarImageUrl** – returns the URL of the specified user's avatar image. - **GetUserAvatarImage** – returns an HTML image tag that displays the avatar of a specified user. ### GetUserAvatarImageUrl The _GetUserAvatarImageUrl_ method can be called with the following parameters: **GetUserAvatarImageUrl(object avatarID, object userID, int maxSideSize, int width, int height)** ```csharp title="Text / XML transformation example" {% GetUserAvatarImageUrl(UserAvatarID, UserID, 200, 150, 150) %} ``` ```csharp title="ASCX transformation example" <%# GetUserAvatarImageUrl(Eval("UserAvatarID"), Eval("UserID"), 200, 150, 150) %> ``` ### GetUserAvatarImage The _GetUserAvatarImage_ method can be called with four different sets of parameters as described below. **GetUserAvatarImage(int maxSideSize, string alt)** ```csharp <%# GetUserAvatarImage(50, HTMLEncode(GetNotEmpty("UserNickname;UserName"))) %> ``` Returns an image tag displaying the avatar contained in the _AvatarGuid_ field of the currently transformed user, with a maximum side size of 50 px. and Alt tag equal to the user's Nickname or Username. The AvatarGuid field must be accessible for this method to work. > **Note:** **This overload does not support Gravatars!** > > The `GetUserAvatarImage` method cannot display [Gravatars](https://docs.kentico.com/k11/community-features/avatars/using-gravatars.md) when called with these two parameters only. Use one of the overloads that include the `userID` parameter for this purpose. **GetUserAvatarImage(object userID, int maxSideSize, int width, int height, object alt)** ```csharp <%# GetUserAvatarImage(Eval("UserID"), 200, 0, 0, Eval("UserName")) %> ``` Returns an image tag displaying the current avatar of a user with ID UserID, with a maximum sidesize of 200 px. and an Alt tag equal to the user's username. **GetUserAvatarImage(object avatarID, object userID, int maxSideSize, object alt)** ```csharp <%# GetUserAvatarImage(Eval("UserAvatarID"), Eval("UserID"), 50, Eval("UserName")) %> ``` Returns an image tag displaying the avatar with ID UserAvatarID, of a user with ID UserID, with a maximum sidesize of 50 px. and Alt tag equal to the user's username. **GetUserAvatarImage(object avatarID, object userID, int maxSideSize, int width, int height, object alt)** ```csharp <%# GetUserAvatarImage(Eval("UserAvatarID"), Eval("UserID"), 0, 40, 45, Eval("UserName")) %> ``` Returns an image tag displaying the avatar with ID UserAvatarID, of a user with ID UserID, with a maximum width of 40 px., maximum height of 45 px. and Alt tag equal to the user's username. ### Example result The following is an example of an image tag generated by the **GetUserAvatarImage** method. The **GetUserAvatarImageUrl** method returns the same image URL without the _img_ tag. The methods use the _**\~/CMSPages/GetAvatar.aspx**_ handler URL to get the source image. ```html Andy ``` When displaying Gravatars, the image is retrieved from as shown in the example below: ```html User avatar ``` ## Group avatars Group avatars can be displayed using the same approach, with the difference that the `\<%# GetGroupAvatarImage( ... ) %\>` method is called instead: **GetGroupAvatarImage(int maxSideSize, object alt)** ```csharp <%# GetGroupAvatarImage(50, Eval("GroupDisplayName", true)) %> ``` Returns an image tag displaying the group avatar specified by the AvatarGuid field of the currently transformed group, with a maximum sidesize of 50 px. and Alt tag equal to the group's Display name. The AvatarGuid field must be accessible for this method to work. **GetGroupAvatarImage(object avatarID, int maxSideSize, object alt)** ```csharp <%# GetGroupAvatarImage(Eval("GroupAvatarID"), 50, Eval("GroupDisplayName", true)) %> ``` Returns an image tag displaying the group avatar with ID GroupAvatarID, with a maximum sidesize of 50 px. and Alt tag equal to the group's Display name. **GetGroupAvatarImage(object avatarID, int maxSideSize, int width, int height, object alt)** ```csharp <%# GetGroupAvatarImage(Eval("GroupAvatarID"), 0, 40, 45, Eval("GroupDisplayName", true)) %> ``` Returns an image tag displaying the group avatar with ID GroupAvatarID, with a maximum width of 40 px., maximum height of 45 px. and Alt tag equal to the group's Display name.