The new Sueetie UserAvatar Control was a feature I made sure got into Gummy v1.3, not because users were clamoring for it but because I wanted one. It’s one of those controls that’s fun to use in some weird geeky sort of way. You know, drop
<SUEETIE:UserAvatar runat=server />
on a page and suddenly a user’s photo appears. Fun! I also enjoyed coming up with the back-end logic for this control since the inheritance model for passing contextual object properties is a little tricky in a multi-application environment like Sueetie. Fortunately the enhanced Sueetie Application Data Objects have the intelligence we need for passing context.
Here is a screenshot of the Recent Discussion list on the Sueetie Home Page demonstrating the data context passing which enables us to add a UserAvatar control for the thread’s Author. And with the UserAvatar’s design, we can do the same for every object of every application in Sueetie.
The new Sueetie UserAvatar Control Wiki Document follows which lists the various control properties and details how it is integrated with List View Controls like on the ForumTopicList above.
__________________
Sueetie UserAvatar Control
The Sueetie UserAvatar Control enables you to display a community member's avatar anywhere in your community. It support displaying the current Sueetie User or a user you specify through control properties. In its most simple usage, the Sueetie UserAvatar Control is as simple as the following HTML.
<SUEETIE:UserAvatar runat=server />
The above HTML displays the current user's thumbnail avatar image. Pretty simple.
UserAvatar Control Properties
The UserAvatar Control derives from the ASPNET ImageButton control and supports the following properties:
- BorderWidth
- Height
- Width
- CssClass
- UseOriginalImage
- PostBackToProfile
- AvatarSueetieUser
The logic of determining the specific user's avatar to display is based on the AvatarSueetieUser SueetieUser object. The PostBackToProfile boolean property sets whether we want the image to link to the user's profile page. (Default: true.) The UseOriginalImage property says that we should use the user's larger image to generate the avatar. User Avatars are stored in two sizes, a larger size and thumbnail size, so if you want to display an avatar larger than the default thumbnail size (60x60), you'd use the larger image for better clarity. To learn more about how avatars are managed in Sueetie, please see the Sueetie User Avatars Wiki Document.
Defining AvatarSueetieUser: the UserAvatar In Action
We're going to use the Recent Forum Topic List View Control as an example of defining the AvatarSueetieUser for the Avatar Control display. Here is a screenshot of the topic list as displayed on the Sueetie.com Home Page.
Now let's look at the View HTML which displays the individual Topic List View Item.
You'll see how OnLoad() the AvatarSueetieUser is defined by retrieving a "ThinSueetieUser" from the SueetieForumTopic object's SueetieUserID property. It's important to note that we are not making a trip to the database to retrieve the avatar information, which is in reality a single integer. (More on Sueetie avatar logic in the Sueetie User Avatars Wiki Document.) This is where the ThinSueetieUser comes to play. A few essential properties of all registered community members are cached in server memory. It is from this cached user list that the UserAvatar control retrieves its avatar integer to create the /images/avatar/#t.jpg url.