SunBlogNuke - DotNetNuke Blog Module

Note that: that is a tutorial contributed by our client Matt. If you would like to share any tips and tricks about our blogging module – SunBlogNuke, please share it here or contribute it to us. You will be benefit to expand on your license's access to support and updates  if your tutorials can be published in our team blog.

Active Social and SunBlogNuke can play very nicely together, thanks to some good design choices in Active Social, and the extensive skinning capabilities of SunBlogNuke.

It's possible to use Active Social avatars within the SunBlogNuke comments and author images, starting from v3.6.1 of SunBlogNuke. I have done this successfully with Active Social 1.6 and 1.7.

To do this, you should modify a template other than the default template for SunBlogNuke. You can create a new template simply by copying the folder /DesktopModules/SunBlog/Themes/Default to a new name. To get the more information about the process, please visit the tutorial [Develop Your Customized Theme for DNN Blog Module] in our team blog.

Okay, let us go through the steps required to complete this avatar integration as follows:

1. Comments

   For comments, I wanted to preserve the use of Gravatars for users that aren't logged in. Any logged in users will use their Active Social avatar. This is the simplest modification; you can simply replace the entire text of the file.

   Within your template folder, open CommentView.ascx and replace the current text with the following:

   <%@ Control Language="vb" AutoEventWireup="false" Inherits="DnnSun.SunBlogNuke.Framework.CommentViewBase" %>
   <%@ Register TagPrefix="toolkit" Namespace="DnnSun.WebControls.Toolkit" Assembly="DnnSun.Modules.SunBlogNuke" %>
   <div class="<%=Comment.CssClass%>">
       <a name="comment-<%=Comment.CommentID%>"></a>
       <h5 style="padding: 5;">
           Posted by <%=FormatAuthor("author")%>
           on <i><%=Comment.AddedDate%></i></h5>
       <% If Comment.UserID = -1 Then%>
       <toolkit:Gravatar ID="gravatarImg" CssClass="avatar" runat="server" OutputGravatarSiteLink="false" EnableViewState="false" />
       <% Else%>
       <img class="avatar" src="/desktopmodules/activesocial/profilepic.ashx?PortalId=0&uid=<%=Comment.UserId%>&h=80&w=80"  alt="avatar for author"/>
       <% End If%>
       <div style=""><%=Comment.Comment%></div>
       <% If Not Comment.Approved Then%>
       <em class="notApproved">This comment will not appear until it is approved.</em>
       <% End If%>
   </div>

2. Basic View

   The blog "list" view is called Basic View. In modifying the basic view, you can change the "post" icon to your author's avatar. Open BasicView.ascx in your template folder. In order to make this look "pretty", we need to override the CSS. So change the line:

   <div class="entry_Header">

   to:

   <div class="entry_Header" 
       style="background:url('/desktopmodules/activesocial/profilepic.ashx?PortalId=0&uid=<%=entryAuthorProfile.UserID%>&h=36&w=36') no-repeat left top;
       height:50px;padding-left:50px;">

3. Detail View

   Detail view is for reading the blog post itself. Again, you can change the "post" icon to your author's avatar by changing:

   <div class="entry_Header">

   to:

   <div class="entry_Header" 
       style="background:url('/desktopmodules/activesocial/profilepic.ashx?PortalId=0&uid=<%=entryAuthorProfile.UserID%>&h=36&w=36') no-repeat left top;
       height:50px;padding-left:50px;">

4. Authors Widget

   Finally, we have the authors widget which lists each author for your blog. From SunBlogNuke 3.6.1 onward, you can add the necessary code within the widget settings itself. Simply logon to your site as an administrator, browse to the page that you've added the Authors widget to (or add it to a page), and open Widget Settings.

   I used the following code:

   <img width="36" height="36" class="avatar avatar-36" 
            src="/desktopmodules/activesocial/profilepic.ashx?PortalId=0&uid=[USERID]&h=36&w=36" alt="[AUTHOR]"/>
   <a title="Posts by [AUTHOR]" href="[LINK]">[AUTHOR] ([ENTRYCOUNT])</a> 
   <a href="[RSSLINK]" title="RSS feed for [AUTHOR]">
       <img width="12" height="12" src="/desktopmodules/sunblog/images/feed-icon-12x12.gif" alt="[AUTHOR] RSS Feed"/>
   </a>

That's all. Well done and it will work like a charm. Please visit our website - AuTechHeads.com to see how it action :)

If you have any question please continue to the discussion in the support forum.