Identicons and Gravatars in Community Server thanks to CarKnee

written by Andrew Tobin on Tuesday, June 19 2007

I've just gone through and added Identicons and Gravatars to my blog thanks to Sean Kearney's CarKnee Bundle for Community Server 2007.

It was fairly straight forward, however I found that Sean had left out some information in the documents in the bundle that he has on his site.

I also changed a few small items to be a tiny bit clearer.

So I am going to post below, referencing Sean's blog on where to find the changes, what you need to do to set both Gravatars and Identicons up on your blog (If you want one or the other then you can use this as a guideline, but you'll really need to figure it out from the docs with Sean's blog as backup).

I'm also going to explain it using the default blog skin for Community Server 2007 - as that is what I am running and makes sense to me, your skin may vary but it should have most of the same components I'd imagine.

Step 1: Unzip the bundle somewhere where you can access the files.

Step 2: Copy the CarKnee.CS.Bundle.dll file from the web\bin\ directory to your sites ~/bin/ directory.

Step 3: Copy the IdenticonHandler.ashx file from the web\user directory to your sites ~/user/ directory.

Step 4: Edit the ~/user/web.config file on your site (ftp it down to a directory to work with and upload it when complete).

Basically you'll see a group of statements that look like the following, one after another down the web.config:

<location path="">
    <system.web>
        <authorization>
            <allow users="?" />
        </authorization>
    </system.web>
</location>

You want to add at the bottom another one with:

    <location path="IdenticonHandler.ashx">
        <system.web>
            <authorization>
                <allow users="?" />
            </authorization>
        </system.web>
    </location>

Before the following statement:

    <system.web>
    <!-- This setting is configured so that only authenticated users can 
        visit any of the pages in the Moderate directory -->
      <authorization>
        <deny users="?" />
      </authorization>
    </system.web>

Step 5: Copy your ~/Themes/Blogs/default directory down to your computer so you can alter some files, then reupload them as required.

Step 6: Open from the default directory the file post.aspx.

Step 7: Add the following line at the top of the file, just after the namespace declarations:

<%@ Register TagPrefix="SK" Namespace="CarKnee.CS.Bundle.Controls" 
Assembly="CarKnee.CS.Bundle" %>

In the file it should look like this:

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="False" 
    MasterPageFile="theme.Master" 
    Inherits="CommunityServer.Blogs.Controls.CSBlogThemePage" %>
<%@ Import namespace="CommunityServer.Components"%>
<%@ Import namespace="CommunityServer.Blogs.Components"%>
<%@ Register TagPrefix="SK" 
            Namespace="CarKnee.CS.Bundle.Controls" 
            Assembly="CarKnee.CS.Bundle" %>

(I have added carriage returns for clarity on the blog)

Step 8: Add the comment event:

protected void CommentFormSuccess(System.Web.UI.Control sender, object parameter)
    {    
    CommunityServer.Blogs.Components.WeblogPost post = parameter 
            as CommunityServer.Blogs.Components.WeblogPost;    
    if (post == null)        
        return;    

    if (!post.User.IsAnonymous)        
        return;    

    CommunityServer.Blogs.Controls.WeblogPostCommentForm form = sender 
           as CommunityServer.Blogs.Controls.WeblogPostCommentForm;

    if (form == null)        
        return;    

    System.Web.UI.WebControls.TextBox email = 
            WeblogControlUtility.Instance().FindControl(form, "tbEmail") 
            as System.Web.UI.WebControls.TextBox;    

    if (email == null)        
        return;    
    if (String.IsNullOrEmpty(email.Text))        
        return;    

    post.SetExtendedAttribute("AuthorEmail", email.Text);    

    WeblogPosts.Update(post);
    }

This code goes where I have the comment.

<script runat="Server">

    void Page_Load(object sender, EventArgs e)
    {
        if (CurrentWeblogPost != null)
            SetTitle(CurrentWeblogPost.Subject, false);
    }

    // Insert Code Here
</script>

Step 9: Insert the avatar display code:

 <CSControl:ConditionalContent runat="server">
   <ContentConditions>
     <CSControl:UserPropertyComparison ComparisonProperty1="HasAvatar" 
                                        Operator="IsSetOrTrue" 
                                        runat="server" />
   </ContentConditions>
   <TrueContentTemplate>
    <CSControl:UserAvatar runat="server" BorderWidth="1" />&nbsp; 
   </TrueContentTemplate>
   <FalseContentTemplate>
        <CSControl:ConditionalContent runat="server">
            <ContentConditions>
                <SK:PostExtendedAttributeComparison runat="server" 
                                        ExtendedAttribute="AuthorEmail" 
                                        Operator="IsSetOrTrue" />
            </ContentConditions>
            <TrueContentTemplate>
                <SK:PostGravatar runat="server" 
                                Rating="R" 
                                ExtendedAttribute="AuthorEmail" 
                                Width="80" 
                                BorderWidth="1" />
            </TrueContentTemplate>
            <FalseContentTemplate>
               <SK:Identicon runat="server" 
                             width="80" 
                             BorderWidth="1" 
                             Text="identicon"  />
            </FalseContentTemplate>
        </CSControl:ConditionalContent> 
   </FalseContentTemplate>
</CSControl:ConditionalContent>

This replaces this line of code in the file:

<CSControl:UserAvatar runat="server" BorderWidth="1" />&nbsp;

(IE You find that one line and replace it with the entire paragraph above).

Step 10: You want to add the following line to the action that is fired when a comment is posted:

<CSControl:CustomAction runat="server" OnCustomEvent="CommentFormSuccess" />

This line gets inserted into the block like so:

<SuccessActions>
    <CSControl:CustomAction runat="server" OnCustomEvent="CommentFormSuccess" />
    <CSControl:GoToModifiedUrlAction runat="server" 
                QueryStringModification="CommentPosted=true" 
                TargetLocationModification="commentmessage" />
</SuccessActions>

Step 11: Add the email address box to the form:

Add the following code:

<CSControl:PlaceHolder runat="server">    
    <DisplayConditions Operator="Not">        
        <CSControl:UserInRoleCondition runat="server" 
                                        Role="Registered Users" 
                                        UseAccessingUser="true" />    
    </DisplayConditions>    
    <ContentTemplate>        
        <div class="CommonFormFieldName">            
            <a href="http://www.gravatar.com/" 
                                        target="_blank">Gravatar Email Address</a>:            
            <em>(<CSControl:ResourceControl runat="server" 
                                        ResourceName="Optional" />)</em>        
        </div>        
        <div class="CommonFormField">            
            <asp:TextBox id="tbEmail" runat="server" Columns="60" />            
        </div>    
    </ContentTemplate>
</CSControl:PlaceHolder>

This goes underneath this block of code:

<div class="CommonFormField">
    <asp:TextBox id="tbUrl" runat="server" Columns="60" />
</div>

And before this block:

 <div class="CommonFormFieldName">
    <CSControl:FormLabel LabelForId="tbComment" 
            runat="server" 
            ResourceName="Weblog_CommentForm_Comments" />
    <em>(<CSControl:ResourceControl runat="server" 
            ResourceName="Required" />)</em>
    <asp:RequiredFieldValidator 
            runat="server" 
            ErrorMessage="*" 
            ControlToValidate="tbComment" />
 </div>

This places the email address box after the url box and before the comment form.

Step 12: Upload all changed files back to your test site and try it out!

Finished!

Now, please note that my email form differs slightly to how Sean detailed it at his post: Save Author's Email for Anonymous Blog Comments.

Basically, I have added a hyperlink back to the Gravatar site, in order to show people if they should/should not put their email address into the box.

I have also removed the following line of code:

<asp:RequiredFieldValidator id="emailValidator" 
        runat="server" 
        ControlToValidate="tbEmail" 
        Cssclass="validationWarning">*</asp:RequiredFieldValidator>

What this does is, when placed after the following line in the email block:

<asp:TextBox id="tbEmail" runat="server" Columns="60" />

Then it makes the email box a required field and must have data entered before the form will post.

As we want to show identicons when no email is entered I have removed it to make the email address box optional.

You can also find more information about this topic at Sean's blog under:

Gravatars for Anonymous Comments and ExtendedAttribute Condition Control

Sean has a copy of his post.aspx for the default skin on his Gravatars for Anonymous Comments blog entry, that will look much the same as mine - the only difference being that I have altered my email box with the <a href /> and removing the requirement for entry as I stated.

If you grab either the post.aspx off Sean's site and make the changes to the configs and files I mentioned above, or follow this post then you should find that Gravatars and Identicons will start working on your blog too.

Next you'll have to perform the same type of changes for your Gallery if you want the same pictures there.

In the meantime, if you want to check what it looks like - please feel free to comment!

Comments

Sean Kearney on on 6.19.2007 at 11:04 AM

I am glad someone is using it ;p

Thanks for clarifying some of the help documents... documenting isn't my thing!
andrew on on 6.19.2007 at 11:08 AM

Hey Sean,

Heh, me either usually, but if I don't write these things down when I do them then I forget for the next time and it causes me hours of searching for it all again!

Actually I was more annoyed I didn't read your post properly in the first place to see you had that "post.aspx" attachment - I'll have to change my CS skin to make that part more noticable because I never see it!

But yeah, once I was looking around for setting up that ExtendedAttribute for the email and put all your posts together it was no problems at all to set up.

Great job, mate!
James on on 10.05.2007 at 10:57 AM

Nice!
vanphuoc on on 6.24.2008 at 3:03 PM

Thanks

Grr, Argh!

Sections

Identicons and Gravatars in Community Server thanks to CarKnee

posted in:

4 Comments

Similar Posts

Comments

Post a comment

Search

Tags

My Tweets

Options:

Size

Colors