Adding an Avatar to a User Profile

On a community site, it is very common for the users to have avatars or profile photos. On an VCE site, this functionality can be provided easily by relating an image content item to the user profile article of the user. Here is the preferred way to do this:

Create a relation type in your user profile content type definition. This relation type will only be used to related the profile image content items. Here is the sample configuration for creating a relation type named 'avatar':

<relation-type-group name="profile-relation">
  <relation-type name="avatar">
    <ui:label>Avatar</ui:label>
  </relation-type>
</relation-type-group>

<content-type name="userProfile">
  [...]
  <ref-relation-type-group name="profile-relation"/>
</content-type>

Use com.escenic.community.actions.RelateContentAction struts action class to provide the user a way to relate his image content items to his profile article. Use the relation type name(avatar) in the form property. Please see the action class javadoc for details.

For displaying profile images, show the related contents of 'avatar' relation type of the user profile article. In most of the cases, you may want to show the last profile image. Here is an example JSP fragment to show the profile image of the logged in user in any page:

<community:user id="vceUser"/>
<c:set var="avatarImageItems" value="${vceUser.article.relatedElements.avatar.items}"/>
<c:set var="lastAvatarIndex" value="${fn:length(avatarImageItems) -1}"/>

<c:if test="${lastAvatarIndex != -1}">
  <img src="${avatarImageItems[lastAvatarIndex].content.fields.ALTERNATES.value.thumb.href}" alt="User:">
</c:if>
<!-- Here 'ALTERNATES' is the name of the representation field of the image content -->
<!-- Here 'thumb' is the representation name of the image content -->

Note that, you can remove the image content relation from the user profile article using the action class com.escenic.community.actions.RemoveContentRelationAction. Please see the javadoc for details.