This page explains how Avatars are created in Sueetie as well as how they are (or are not) integrated with the member applications of Sueetie.
Sueetie User Avatars - Patterns
Because Sueetie is a member-centric, loosely application-coupled Online Community framework, user avatars were one of the first features added to the User Profile so they could be shared across the community site. Two of the current four applications that comprise Sueetie employ user avatars, BlogEngine.NET and YetAnotherForum.NET. BlogEngine.NET does not support storing avatars locally, but it supports the display of MonsterID, Wavatar or Identicon avatars with user comments. YetAnotherForum.NET supports the creation of community avatars which are stored as Image data types in the SQL database.
The first decision to be made was whether to go with the cloud approach as BlogEngine.NET, or build a local avatar handling scheme specific to the community. We decided on the latter because community members may want to use a specific avatar and persona unique to that community. Also, with local avatars we could have more control of the quality of the image.
Having decided on local avatars we investigated YetAnotherForum.NET's avatar handling methodology. YAF.NET performs simple resizing and stores a thumbnail image in the SQL yaf_User table. We employed a similar approach and added physical storage to disk for optimal performance.
User Avatars are managed in the user profile area shown above. Sueetie saves two copies of the user photo to the /images/avatars folder as well as the binary to the SQL sueetie_userAvatar avatar. Sueetie user photo dimensions are 200x200 for the larger image, and 60x60 for the thumbnail image. The larger photo image binary is saved to sueetie_userAvatar.
Avatar dimensions are listed in the sueetie.config file located in /util/config/sueetie.config.
<?xml version="1.0" encoding="utf-8" ?>
<Sueetie>
<AvatarSettings
Height="200"
Width="200"
ThumbnailHeight="60"
ThumbnailWidth="60"
Size="150000"
AvatarFolderPath="images\avatars\"
ImageQuality="90" />
<Providers>
<Provider>
....
All AvatarSettings are site-specific and customizable.
Thumbnail Display and Avatar File Storage Logic¶
Two copies of the avatar are saved to /images/avatars. The syntax of the larger avatar image is UserID.jpg, with the thumbnail image UserIDt.jpg. (The addition of "t" after the user id.)
The logic of displaying the user avatar thumbnail, with an example being the sueetie.org header avatar, is:
if (CurrentSueetieUser.HasAvatarImage)
{
AvatarLink.ImageUrl =
"/images/avatars/" + CurrentUserID.ToString() + "t.jpg";
AvatarLink.NavigateUrl = "/members/myaccountinfo.aspx?iv=1";
}
else
AvatarLink.ImageUrl = "/images/avatars/noavatarthumbnail.jpg";
The approach to user avatars was to achieve high image quality and best performance.
Application Integration
As mentioned above, BlogEngine.NET and YetAnotherForum.NET support user avatars. The SueetieUserAvatar is used for both of these applications through customizing the BE Core.CommentViewBase class and the YAF.NET UserBox control. This enables consistent user avatars across all applications.
The Sueetie UserAvatar Control enables you to drop user avatars in any web page. Read more about using the
Sueetie UserAvatar Control in Developer Resources.
Caching Issues
The only item cached with User Avatars is the SueetieUser.HasAvatar boolean property, cached as part of the SueetieUser object. All users have a default HasAvatar property as false until they upload a profile photo. The SueetieUser is flushed from the cache, but the user's avatar will not be updated immediately in site areas outside of the \Members Website project area. This is because each application (forums, media gallery, etc) manage their own cache as a basic principle of ASPNET. So the .HasAvatar property will continue to be false until that application's cache is refreshed. Simply put, new avatars will not display across the site immediately, though updated avatars will display across the site immediately.
Sueetie User Avatars - Origins
We began our design of Sueetie User Avatars with YetAnotherForum.NET, because this system worked great and because avatar integration with forums is a priority. Until integration is complete, users will have to upload forum avatars as a separate process.
We haven't seen the dual avatar storage approach used, but it seemed a smart way to preserve the best image quality while displaying the thumbnail with the least amount of code.
For good source code for image processing, what better place to look than Roger Martin's Gallery Server Pro! We converted a couple of methods from GSP and created an ImageHelper Utility Class. This ensured a high-quality image and makes the disk saving function easy.
#region Save to disk
Bitmap _bitmap = new Bitmap(File.PostedFile.InputStream);
int jpegQuality = SueetieConfiguration.Get().AvatarSettings.ImageQuality;
string path = SueetieConfiguration.Get().SiteRootPath +
SueetieConfiguration.Get().AvatarSettings.AvatarFolderPath;
ImageHelper.SaveImageFile(_bitmap, path +
imageName, imgFormat, width, height, jpegQuality);
ImageHelper.SaveImageFile(_bitmap, path +
thumbnailImageName, imgFormat, thumbnailWidth,
thumbnailHeight, jpegQuality);
#endregion
Top