This is hot!

May 11, 2010
In Extensions

Sorry about post title, could not resist :) You probably saw these "new" and "hot" links next to list items all over the place. Something was added or updated and it makes sense to put an indicator that clearly shows this. I wanted to do it for list of extensions on BlogEngine site, so that when something new added anyone could see it right away, because list is pretty large. And I don’t want to maintain it afterwards, that image should go away when it is not “hot” anymore, all by itself. How hard is this with BlogEngine and .NET? Walk in the park:

using System;
using BlogEngine.Core;
using BlogEngine.Core.Web.Controls;
using System.Text.RegularExpressions;

[Extension("Replaces [new:m/d/yyyy] with new/hot image ", "1.0", "BlogEngine.NET")]
public class HotNew
{
  static HotNew()
  {
    Post.Serving += new EventHandler(Post_Serving);
    Page.Serving += new EventHandler(Post_Serving);
  }

  private const string tag = "<img runat=\"server\" class=\"hotnew\" src=\"{0}/pics/new.png\" alt=\"New\" />";

  private static void Post_Serving(object sender, ServingEventArgs e)
  {
    if (!string.IsNullOrEmpty(e.Body))
    {
      string regex = @"\[new:.*?\]";
      MatchCollection matches = Regex.Matches(e.Body, regex);

      if (matches.Count > 0)
      {
        foreach (Match match in matches)
        {
          string NewItem = match.Value.Replace("[new:", "").Replace("]", "").Trim();
          try
          {
            DateTime dt = DateTime.ParseExact(NewItem, "M/d/yyyy", null);
            if (DateTime.Now < dt)
            {
              e.Body = e.Body.Replace(match.Value, string.Format(tag, Utils.RelativeWebRoot));
            }
            else
            {
              e.Body = e.Body.Replace(match.Value, "");
            }
          }
          catch (Exception ex)
          {
            Utils.Log(ex.Message);
          }
        }
      }
    }
  }
}

There is nothing to explain in this code, it is trivial for any .NET developer to write simple extension like this if there is something extra you need in your blog, without ever touching core library. All you need is a little imagination and half an hour free time.

How to install and use

Download extension and picture and drop them into corresponding location on your server.
Anywhere in the post or page, when you want to indicate that something is new, add [ new:m/d/yyyy ] with no gaps. You need to put in real date, obviously, for example [ new:5/11/2010 ]. Extension will stick "new" image if date is later than current, otherwise code will be removed.
If you want to adjust CSS style for this image, add "hotnew" class to your custom theme and set it appropriately. If you don’t like the picture – no problem, replace with your own, just keep file name or change it in the extension code.

hotnew.zip

Tags Extensions