So I do not allow new people to join my site, therefore, the avatar that displays when someone makes a comment was using the anonymous user avatar. I decided to change this so that it displays a random avatar for each user who makes a post. I am currently not doing the best approach, because pretty much everyone who makes a comment for a post will get a similar avatar. I need to clean it up so that the avatar is assigned from JavaScript instead of simply the css and c# combination that I have now.
The code is simple, if the user making the post is anonymous, then I do not show their avatar. Instead, I generate a random number between 0 and 10 and use that as part of the class name for the div. Here is the code I am using to achieve this:
<CSControl:UserAvatar runat="server" BorderWidth="1">
<DisplayConditions Operator="not">
<CSControl:UserPropertyValueComparison runat="server" ComparisonProperty="IsAnonymous" Operator="issetortrue" />
</DisplayConditions>
</CSControl:UserAvatar>
<CSControl:PlaceHolder runat="server">
<DisplayConditions>
<CSControl:UserPropertyValueComparison runat="server" ComparisonProperty="IsAnonymous" Operator="issetortrue" /></DisplayConditions>
<ContentTemplate>
<div class='avatar<%# new Random().Next(11)%>'> </div>
</ContentTemplate>
</CSControl:PlaceHolder>
This creates HTML that looks like this: <DIV class=avatar10> </DIV>
Now all I do is change my CSS styles so that they display an image as the background for this particular div. Here are a couple of my classes:
.avatar9
{
padding: 0px;
height: 80px;
width: 80px;
border: 1px solid #666;
background: #fff url(../images/Avatars/avatar9.jpg) no-repeat;
margin-right: 5px;
}
.avatar10
{
padding: 0px;
height: 80px;
width: 80px;
border: 1px solid #666;
background: #fff url(../images/Avatars/avatar10.jpg) no-repeat;
margin-right: 5px;
}
Read the complete post at http://feeds.feedburner.com/~r/WyattPreul-TheGeekCowboy/~3/167758814/random-avatar-generation-for-blog-comments.aspx