I spent so much time describing the new Sueetie.Core framework elements created to support User Avatars that I forgot to document avatars. Today’s Sueetie Patterns and Origins Wiki document: Sueetie User Avatars.
___________________
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 tightly member-centric, loosely application-coupled Online Community framework, user avatars were one of the first features added to the User Profile. 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 over 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 in the SQL yaf_User table as an Image datatype. We employed a similar approach and added physical storage to disk for best performance.
User Avatars (or Photos, as we refer to them on sueetie.org) are managed in the user profile area shown above. Sueetie.org saves two copies of the user photo to the /images/avatars folder as well as to the SQL sueetie_userAvatar avatar. Sueetie.org user photo dimensions are 200x200 for the larger image, and 60x60 for the thumbnail image. The larger photo image is saved to sueetie_userAvatar.
Avatar dimensions are listed in the sueetie.config file located at the site root.
<?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. There is currently no integration between the Sueetie User Avatar and the avatar logic of BE.NET and YAF.NET, though it is planned and will be added to the respective application's DIFF set. This was the primary reason we launched User Avatars with redundant SQL Server storage, so we would have more flexibility on how to approach avatar integration most efficiently based on the application.
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 of 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
Sueetie.Core Patterns and Origins Documents: