Post list on Default.aspx

Topics: Themes
Sep 16, 2013 at 10:55 PM
I'm wondering if it's possible to edit the contents of the post list on the default.aspx page. I need to do two things.
  1. I don't really want the headlines to have the h1 tag. I'd rather they were h2 or h3.
  2. I'd like to add a thumbnail image for each post.
Are these two things possible?

Thanks
Sep 17, 2013 at 11:29 AM
Edited Sep 17, 2013 at 11:54 AM
You can do both from your theme's PostView file, exactly how depends on the theme you are using.

If you open that file you should be able to find the H1 tags.
Problem with doing a straight swap to a different heading level is that the level is also changed for single post, so maybe you want to add in some code to account for that, for example:
<% if (Location == BlogEngine.Core.ServingLocation.PostList)
{ %> 
    <h2 class="PostTitle">
        <a href="<%=Post.RelativeOrAbsoluteLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a>
    </h2>
<%} else {%> 
    <h1 class="PostTitle">
        <a href="<%=Post.RelativeOrAbsoluteLink %>" class="taggedlink"><%=Server.HtmlEncode(Post.Title) %></a>
    </h1>
<%} %>
Here is a function that will allow you to extract the first post image(feed it the Post.Content).
/// <summary>
        /// Find first image tag in a given string.
        /// An empty string is returned if no img tag found.
        /// </summary>
        /// <param name="content">The input string.</param>        
        /// <returns>The img tag or empty string.</returns>
        public static string GetFirstImgTag(string content)
        {
            if (!String.IsNullOrEmpty(content))
            {
                Regex tagRegex = new Regex(@"<img\b[^>]*>", RegexOptions.IgnoreCase | RegexOptions.Multiline);
                Match tagMatch = tagRegex.Match(content);
                if (tagMatch.Success)
                {
                    return tagMatch.Value;
                }
            }
            return string.Empty;
        }
You make a call to this function in your PostView where you would like the resulting image to appear(conditional on being post list view), for example:
<% if (Location == BlogEngine.Core.ServingLocation.PostList && this.ShowExcerpt)
{ %> 
    <div class="postThumbnail">
        <%=GetFirstImgTag(Post.Content)%>                 
    </div>
<%} %> 
Style the image with CSS via the parent div, for example:
div.postThumbnail img {
   width:75px;
   height:75px;
}
This is a very rough guide, there are other ways of doing this and ideally you want to serve any thumbnails scaled, but that's a little more involved.

P.S.
You could also check out extension "ExcerptImages" http://dnbegallery.org/cms/List/Extensions?page=4
Sep 17, 2013 at 2:11 PM
Thanks! I will try these suggestions out and let you know how they worked.

-Brandon
Sep 18, 2013 at 10:06 PM
Edited Sep 18, 2013 at 10:10 PM
The code for swapping the h1 tags for h2 in for PostList worked perfectly.

I created a code behind for the PostView.ascx file and inserted the function above into it. When I call the function in PostView.ascx I get the error:

The name 'GetFirstImgTag' does not exist in the current context

Do I have the function in the right location?
Sep 18, 2013 at 10:46 PM
Edited Sep 18, 2013 at 11:02 PM
If you let me know what theme you are using I can post a working code behind, which you can compare with what you have.

Getting late UK time, so probably do that early doors tomorrow.

Edit
Might seem obvious, but did you remember to change the inherits and code file in PostView.ascx?
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false"  CodeFile="PostView.ascx.cs" Inherits="PostView" %>
Sep 19, 2013 at 1:31 PM
Code behind PostView.ascx.cs
using System;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;
using BlogEngine.Core;


public partial class PostView : BlogEngine.Core.Web.Controls.PostViewBase
{      
    protected override void OnLoad(EventArgs e)
    {        
        base.OnLoad(e);
    }
   
    public string GetFirstImgTag()
    {       
        Regex tagRegex = new Regex(@"<img\b[^>]*>", RegexOptions.IgnoreCase | RegexOptions.Multiline);
        Match tagMatch = tagRegex.Match(Post.Content);
        if (tagMatch.Success && this.ShowExcerpt)
        {
            return "<div class='postThumbnail'>" + tagMatch.Value + "</div>";
        }
       
        return string.Empty;
    }   
}
Inherits in PostView.ascx should be
<%@ Control Language="C#" AutoEventWireup="true" EnableViewState="false"  CodeFile="PostView.ascx.cs" Inherits="PostView" %>
Then where you want the image to appear in PostView.ascx
<%=GetFirstImgTag()%>
If you want more control over the thumbnail markup, get first image source and write your own image tag and any wrapper elements in code behind.
//Provide a path to some default image to use if no post image is found, or set useDefaultImg false.
        public static string GetFirstImgSrc(string content, bool useDefaultImg)
        {
            if (!String.IsNullOrEmpty(content))
            {
                Regex tagRegex = new Regex(@"<img\b[^>]*>", RegexOptions.IgnoreCase | RegexOptions.Multiline);
                Match tagMatch = tagRegex.Match(content);
                if (tagMatch.Success)
                {
                    Match matchSrc = Regex.Match(tagMatch.Value, "src=[\'|\"](.+?)[\'|\"]", RegexOptions.IgnoreCase | RegexOptions.Multiline);
                    if (matchSrc.Success)
                    {
                        return matchSrc.Groups[1].Value;
                    }
                }
            }
            return useDefaultImg ? DefaultThumbSrc : string.Empty;
        }
Sep 19, 2013 at 2:24 PM
Looks like I was missing a few things in my codebehind for PostView. I didn't have the BlogEngine.Core namespace or the override.


What does the override code do?
protected override void OnLoad(EventArgs e)
    {        
        base.OnLoad(e);
    }
Thanks for your help. Much appreciated.
Sep 19, 2013 at 3:21 PM
Not a lot, it's a carry over from some copy and pasting, forgot to take it out.
Mar 28 at 2:57 AM
Thank you for this post, the h1 and h2 swap worked for me too, which was brilliant! Thanks! But, the regex code is still showing the thumbnail on the individual post page. I only want the thumbnail to show on the PostList, not the Single Post page. How do I go about programming this?
Mar 28 at 10:02 AM
Are you wrapping the get image code in a conditional? i.e.
<% if (Location == ServingLocation.PostList) { %>   
        <%=GetFirstImgTag()%>
    <%} %>   
Mar 28 at 11:54 PM
Yes, I am wrapping the image in a conditional. I am inserting the image directly in the body of the post. Is this correct? Or should I be uploading it and using the file picker? When I insert it directly in the post and use Post.Content, The function inserts ALL of the tags from the content not just the img tag, such as the <p> tag and <div> tags. You can see what is going on here. rag2.khambley.com. I'm using the bootstrap 3 media object to construct the post excerpt.
Mar 29 at 12:47 AM
You know what, never mind, I got it to work brilliantly! Thank you soooo much! I'm such a bonehead, I forgot to click Only Show Description of Posts, Duh! I can't tell you what this means to me. Thanks again!