Authorship Help / Widget installation

Topics: ASP.NET 2.0, Controls
Apr 23, 2012 at 3:54 PM

Hello, I'm very new to BE.NET.  

I'm working on a couple of websites that are using custom theme BE.NET blogs.  

I would like to add a way to include an author byline box, with image and 'about' text, which would automatically populate at the end of article posts.

What's the best way to do this? I found the "AboutMe" widget, but not sure how to get it functioning. Any help is greatly appreciated. 

Apr 23, 2012 at 10:59 PM

The "AboutMe" widget is probably not what you need for what you describe.

The code required to accomplish what you require will depend on the theme.

The following code snippets assume you are not using razor themes (different syntax and set-up, same logic though).

In the theme folders you should have a PostView.ascx file. 

Enter the following where you would like the author image and about text to show.

<div class="authorDetails">
	<%=AuthorDetails%>           
</div>        

You possibly won't have a code behind file for this, so you will need to make one, a PostView.ascx.cs that should contain the following:

using System;
using System.Globalization;
using System.Text.RegularExpressions;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using BlogEngine.Core.Web.Controls;
using BlogEngine.Core;

public partial class PostView : BlogEngine.Core.Web.Controls.PostViewBase
{

    public string AuthorDetails = string.Empty;  

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        this.AuthorDetails = getAuthorDetails();       
    }    

    private string getAuthorDetails()
    {
        AuthorProfile ap = this.Post.AuthorProfile;

        if (ap == null)
        {
            return "";
        }

        string authorImage = string.Empty;
        string authorBio = string.Empty;

        if (hasValidEntry(ap.PhotoUrl))
        {
            //A directory in your App_Data/files where you store author images
            string imgSrc = Utils.RelativeWebRoot + "image.axd?picture=authorImages/" + ap.PhotoUrl;
            authorImage = "<img class=\"authorImage\" width=\"45\" src=\"" + imgSrc + "\" alt=\"" + ap.DisplayName + "\" />";
        }


        if (hasValidEntry(ap.AboutMe))
        {            
            authorBio = "<div class=\"authorBio\">" + ap.AboutMe + "</div>";           
        }

        return authorImage + authorBio;
    } 
   
    /// <summary>
    /// Checks the given string for null, spaces or literal null text.
    /// Useful for checking data entry fields
    /// </summary>
    public static bool hasValidEntry(string s)
    {
        return s != null && s.Trim().Length > 0 && s != "null";
    }
}

This is untested, but I think not far off the mark, anyway...

In the BE admin panel you will need to fill out some user details (profile details).

In the Photo URL field for each author, add the name of the author image i.e. "me.jpg" (see code comment for image location)

In the Short Biography text area, fill out the about me stuff.

Style to suit using CSS and assigned class names.

Hope this makes some kind of sense.

Apr 25, 2012 at 11:02 PM

Nice, Andy!

Apr 25, 2012 at 11:02 PM

Nice, Andy!

Jul 23, 2013 at 9:37 PM
Edited Jul 23, 2013 at 9:39 PM
Hello Andy,

Based on your post and code posted above, I created / added a new .cs in the theme / standard folder (as I am using standard theme).

I named the .cs as PostView.ascx.cs

Since, I added a new .cs, I thought it is a good idea to rebuild the solution (I am using VS 2012, installed blogengine 2.8 source code version on my local machine)

I am getting this error in webconfig:
Error   28  It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level.  This error can be caused by a virtual directory not being configured as an application in IIS.  C:\Users\Downloads\Projects\BlogEngine\BlogEngineSC\Source\BlogEngine\BlogEngine.NET\setup\SQLServer\Web.Config 10  
FYI.....I am using SQL Server Database


I am getting this error too:
Error   31  The name 'AuthorDetails' does not exist in the current context  c:\Users\Downloads\Projects\BlogEngine\BlogEngineSC\Source\BlogEngine\BlogEngine.NET\themes\Standard\PostView.ascx  20  5   C:\...\BlogEngine.NET\
Jul 24, 2013 at 12:23 AM
Hi Pepper,

That code is quite old now, I'll have a look at what needs changing for BE 2.8 early tomorrow(UK time) and post the update.
Jul 24, 2013 at 2:32 AM
Edited Jul 24, 2013 at 2:34 AM
Thank you Andy.

I am using standard and also the FlatBlog theme. I would deeply appreciate help with the code. I will keep an eye on this topic for your reply.

Also, on the homepage where all the blog posts are populated, I would like to display author image / avatar along with each post.

So I need 3 things:

1) Author image on homepage with every post
2 & 3) When someone clicks on the title of the post, the blog post page appears, on that page I want author image right next to the post and at the bottom, About Author.
Jul 24, 2013 at 9:54 AM
Edited Jul 24, 2013 at 9:55 AM
Hi Pepper,
A couple of points to note:

In PostView.ascx the first line has been changed to reference your new code behind file PostView.ascx.cs

In PostView.ascx the function GetAuthorDetails(int width, int height, bool includeSummary) is being called in two different places, the first for post lists and the second for the main post. So for the post list the image size is set smaller and does not include a description and in the actual post the image is set larger and includes a description/author summary.

Of course, everything is dependant on user profiles being reasonably well filled out.

The following code is for the standard theme. you should be able to copy and paste, note that elements have class names that you can style with CSS.

PostView.ascx
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false"  CodeFile="PostView.ascx.cs" Inherits="PostView" %>
<div class="post PostPad xfolkentry" id="post<%=Index %>">
    <h2 class="PostTitle">
        <a href="<%=Post.RelativeOrAbsoluteLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a>
    </h2>
    <div class="PostInfo Clear">
        <span class="PubDate"><%=Post.DateCreated.ToString("d. MMMM yyyy HH:mm") %></span>
        <span> / </span>
        <span><a href="<%=BlogEngine.Core.Utils.AbsoluteWebRoot + "author/" + BlogEngine.Core.Utils.RemoveIllegalCharacters(Post.Author) + BlogEngine.Core.BlogConfig.FileExtension %>"><%=Post.AuthorProfile != null ? Post.AuthorProfile.DisplayName : Post.Author %></a></span>
        <span> / </span>
        <span class="CatPost"><%=CategoryLinks(" . ") %></span>
        <a rel="nofollow" class="Right" href="<%=Post.RelativeOrAbsoluteLink %>#comment"><%=Resources.labels.comments %> (<%=Post.ApprovedComments.Count %>)</a>
        <div class="Clearer"></div>
    </div>
    <div class="PostBody text">
        <% if (Location == BlogEngine.Core.ServingLocation.PostList)
           { %> 
        <span class="postListAuthorImage">
            <%=GetAuthorDetails(45, 45, false)%>           
        </span>
        <%} %>  
        <asp:PlaceHolder ID="BodyContent" runat="server" />
        <% if (Location == BlogEngine.Core.ServingLocation.SinglePost)
        { %> 
            <div class="authorSummary">
                <%=GetAuthorDetails(75, 75, true)%>           
            </div>
        <%} %>  
    </div>
    <div class="PostRating">
        <%=Rating %>
    </div>
    <div class="PostTags">
        <%=Resources.labels.tags %> : <%=TagLinks(" . ") %>
    </div>
    <%=AdminLinks %>
</div>
PostView.ascx.cs
using System;
using BlogEngine.Core;

public partial class PostView : BlogEngine.Core.Web.Controls.PostViewBase
{

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);        
    }

    public string GetAuthorDetails(int width, int height, bool includeSummary)
    {
        AuthorProfile ap = this.Post.AuthorProfile;
        if (ap != null)
        {            
            string authorBio = string.Empty;
            string email = HasValidEntry(ap.EmailAddress) ? ap.EmailAddress : GetEmailAddress(ap.UserName);
           
            var avatar = Avatar.GetAvatar(email);
            var imgSrc = avatar.Url.ToString();
            string authorImage = string.Format(
                "<img class='authorImage' width='{0}' height='{1}' src='{2}' alt='{3}' />",
                width,
                height,
                imgSrc,
                ap.DisplayName
                );           

            if (HasValidEntry(ap.AboutMe))
            {
                authorBio = "<p class=\"authorBio\">" + ap.AboutMe + "</p>";
            }

            return includeSummary ? authorImage + authorBio : authorImage;
        }
        return string.Empty;
    }
    
    /// <summary>
    /// Checks the given string for null, spaces or literal null text.
    /// Useful for checking data entry fields.
    /// </summary>
    public static bool HasValidEntry(string s)
    {
        return s != null && s.Trim().Length > 0 && s != "null";
    }

    /// <summary>
    /// Get email address for a given user.   
    /// </summary>
    public static string GetEmailAddress(string userName)
    {
        if(!string.IsNullOrEmpty(userName))
        {
            System.Web.Security.MembershipUser user = System.Web.Security.Membership.GetUser(userName);
            if (user != null)
            {
                return user.Email;
            }
        }       
        return string.Empty;
    }
}
Jul 24, 2013 at 12:17 PM
Thank you Andy, it is working now and the image is showing up.

Quick questions:

1) How to make the image of author as image link and link with the author's posts ?
2) How to display author's full name (first and last) right with the image ?
2) Is it possible to have public profile for users in Blog Engine ? if yes, how ? how to make image link navigate to public profile page of author in this case ?