Displaying avatars in transformations

User avatars

User avatars can be displayed in transformations 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)

Text / XML transformation example



{% GetUserAvatarImageUrl(UserAvatarID, UserID, 200, 150, 150) %}


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)




<%# 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.

This overload does not support Gravatars!

The GetUserAvatarImage method cannot display Gravatars 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)




<%# 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)




<%# 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)




<%# 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 ~/CMSModules/Avatars/CMSPages/GetAvatar.aspx page to get the source image.




<img src="/Kentico/CMSModules/Avatars/CMSPages/GetAvatar.aspx?maxsidesize=50&amp;avatarguid=42f9d97e-b0c8-43a2-8a35-62dfec5ae64a" alt="Andy" class="AvatarImage" />


When displaying Gravatars, the image is retrieved from http://www.gravatar.com/ as shown in the example below:




<img src="http://www.gravatar.com/avatar/9b20d3ee7a6ba98550babc044da91bfb?s=80&amp;r=g&amp;d=wavatar" alt="User avatar" class="AvatarImage" />


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)




<%# 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)




<%# 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)




<%# 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.