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; }