Again, I’ve seen hundreds of these out there, but they all seem to work differently from what I expected.  So…I decided to write my own.  It’s really not that sophisticated here.  What I decided to do is to display a random photo pulled from the HTML of a post that has one of the specified tags.

So, in the BlogEngine “widgets” directory, create a folder called “RandomPhoto”.

Create two .ascx UserControls called “edit.ascx” and “widget.ascx”.

[more: Dude, this is long one…click here to read the full post]

Widget.ascx

This is the control that will be displayed on the widget area.  It’s simple:

Yeah, that’s it.  It’s a panel, containing a link and an image.  We will have to set the NavigateUrl of the link in codebehind, as well as the ImageUrl of the Image.

Overriding the “IsEditable” makes an edit link on the widget.

Let’s examine the “LoadWidget” override:

GetSettings() on line 33 returns the settings configuration of the widget in a name/value string dictionary.

Line 35 sets the “frequency”.  I’m setting this to an enumeration that I’ve created in my blog engine assembly.

This is an enumeration I use to determine when to change the random things on my blog, like Quote of the Day, and Random Photo.  “Always” always changes the content when the page is refreshed or a new page is rendered.  “Daily” keeps the random item the same for the entire day.  “Hourly” keeps the random item the same for the current hour, and “Minutely” keeps the item the same for the minute.  Note that this is NOT A DURATION.  i.e. “Daily” will not keep an item good for a 24 hour period.  It will keep a random item constant for the calendar day.  Once the day changes, the random item will be different.

The values dx and dy will be used for the width and height of the thumbnail.  The rr and rl are from an earlier version where I was generating a thumbnail dynamically and rotating it.  It’s not necessary now and should be removed.

The “Tags” value is a comma delimited list of tags from which images will be selected.  Once we have all of the settings parsed and default values in place of missing items, we can get the image.

The “GetImage” method creates a new “RandomImageGenerator” class.  on lines 63 – 65, you can see how the change frequency discussed above keeps a random item constant for a specified period by using a seed derived from the change frequency.  Add the tags on line 67, and get the image names on line 68.  The RandomImageGenerator class will return two strings in an array.  The first string is the URL to the thumbnail image, and the second string is the URL to the full image.

Lines 75 – 77 set the size of the image based on limiting dimensions from the settings.  The aspect ratio of the actual thumbnail will be used, so we only specify the LIMITING side.  If dx is specified, the thumbnail is constrained on the width and is allowed to grow vertically.  If dy is specified, the thumbnail is constrainted on the height, and will grow on the width.  If they are both specified, dy is ignored.

Let’s take a look at the class that gets the random image.

It’s not terribly complicated.  A list of tags, a Random that is initialized from the seed specified in the constructor.  Using ADO.NET Entity Framework generated from the BlogEngine database, I am getting a list of post ids where their tag is in the list of specified tags.  Once I have a post, use the regular expression to find an image in it.  Not all posts will have an image, so I look 1000 times to try to find one.  Not elegant, but functional.  The regular expression gets the virtual path to the image, and the thumbnail. 

Note that if the post contains an image that is not a thumbnail that links to a full sized image, this method will not work for you.

Edit.ascx

In order to be able to specify parameters to our widget at run time through the web interface, we need to specify an edit control.  The edit control will look like this:

Here, you enter the change frequency, comma delimited list of tags, constraining width, constraining height, and the two fields that are no longer used and need to be removed when I have time.

The ascx source looks like this:

It’s a simple table.  The codebehind:

Lines 19 and 20 populate the combo box with the values of the ChangeFrequency enumeration.  The text of the other controls is set from the values in the settings dictionary.

The “Save” method sets the settings values from the textboxes, etc.

That’s really all there is to it.  I’ve been using it on my blog for a while, and haven’t noticed any problems.  The regular expression might not cover all scenarios, but it should work fine for the most part.  Since my implementation uses a “RandomImageGenerator” class that is in my custom assembly, I haven’t included a project.  The functionality of that class can be merged into the widget.ascx file.  That way, you only need to place the 2 ascx files and 2 ascx.cs files in the widgets/randomPhoto directory and an assembly isn’t required.

Comment on this
Development
blogengine

Well, my original Date-aware theme header images was kinda crappy:

• Required modifications to the BlogEngine.NET theme
• Only changed a header image
• Was not implemented as a BlogEngine.NET extension
• Was not configurable in the BlogEngine.NET control panel
• …we can go on and on here…it was not a very good solution.

So, here is my attempt at version 2. It's quite a bit simpler.

Copy the attached TimelyStyle.cs file into the Extensions folder of the BlogEngine.NET web site.  Now go to the BlogEngine.NET control panel and configure.

More...

Comment on this
Development
blogengine

My wife wanted to see the number of views she had on each post, so I began the hunt to plug in a view counter for BlogEngine.NET.  I liked the simplicity of this one I found at Moses of Egypt.net.  But after installing, I decided that I wanted to track some information, and I wanted it to go into my SQL database instead of an XML file.

My first pass included a LINQ to Entities model, but due to the artifacts required, that has to be in an assembly (well, it doesn't have to be…but it's easiest that way).  When I started to post it, I though it would be much easier as a simple extension that could be dropped in the BlogEngine.NET extensions directory and go.

So an easier solution to that is a LINQ to SQL context.  It's not going away that soon, so I'm posting the LINQ to SQL solution here.

More...

Comment on this
Development
linq to sql | blogengine

I love using Windows Live Writer instead of BlogEngine.net web editing.  That’s a no-brainer.  But I installed Windows 7 Beta, and Live Writer no workey.  It just crashed on startup.  Others have reported it hanging on startup.

Finally found a simple fix.  It’s pretty obvious, but I’ve had such success with Vista and Windows 7 that I had forgotten about program compatibility.

Right-click the Live Writer shortcut, Select the “Compatibility” tab, check the “Run this program in compatibility mode for” checkbox, and select Windows Vista.

Comment on this
Development
blogengine | windows7

Update: This post is outdated.  It kinda sucks.  Please don't use this.  A much, much, much simpler solution is posted here.

I've always really liked the subtle holiday themed logos that Google puts on their site.  It's not really hard, so I modified my theme to make the header images change on certain days.

It's not terribly complicated, but it shows a few things that might be of some help.

Configuration

The first step is to tell the BlogEngine.NET theme when to change the header image.

I initially was going to take the quick and easy route, and just use the appSettings section of the web.config file.  I really needed three pieces of information for each date-aware header image, so the appSettings really is kind of a hack.

So I created a custom configuration section in my personal BlogEngine.NET assembly.

public class TimelyHeaderConfigurationSection : ConfigurationSection

{

    public TimelyHeaderConfigurationSection()

    {

    }

 

    [ConfigurationProperty("Enabled", IsRequired = false, DefaultValue = true)]

    public bool Enabled

    {

        get { return (bool)this["Enabled"]; }

        set { this["Enabled"] = value; }

    }

 

    [ConfigurationProperty("DefaultUrl", IsRequired = false)]

    public string DefaultUrl

    {

        get { return (string)this["DefaultUrl"]; }

        set { this["DefaultUrl"] = value; }

    }

 

    [ConfigurationProperty("Headers", IsDefaultCollection=false)]

    [ConfigurationCollection(typeof(TimelyHeaderCollection), AddItemName="add", ClearItemsName="clear", RemoveItemName="remove")]

    public TimelyHeaderCollection Headers

    {

        get

        {

            return this["Headers"] as TimelyHeaderCollection;

        }

    }

}

Enabled obviously turns on or off the functionality.

DefaultUrl allows an image URL to be specified in the event that the current date does not have any matching entries.  You could just leave the off and use the default functionality of the theme.  This is really unnecessary…I have plans for using it for something in the future.

Headers is a collection of TimelyHeader configuration elements defining when to display other header images.  The ConfigurationCollection attribute defines what class will handle the collection of child configuration elements.  It is a standard clear/add/remove collection.

 

public class TimelyHeaderCollection : ConfigurationElementCollection

{

    public override ConfigurationElementCollectionType CollectionType

    {

        get

        {

            return ConfigurationElementCollectionType.AddRemoveClearMap;

        }

    }

 

    public TimelyHeaderElement this[int index]

    {

        get { return (TimelyHeaderElement)BaseGet(index); }

        set

        {

            if (BaseGet(index) != null) BaseRemoveAt(index);

            BaseAdd(index, value);

        }

    }

 

    protected override ConfigurationElement CreateNewElement()

    {

        return new TimelyHeaderElement();

    }

 

    protected override object GetElementKey(ConfigurationElement element)

    {

        return ((TimelyHeaderElement)element).Url;

    }

 

    public void Add(TimelyHeaderElement element)

    {

        BaseAdd(element);

    }

 

    public void Clear()

    {

        BaseClear();

    }

 

    public void Remove(TimelyHeaderElement element)

    {

        BaseRemove(element.Url);

    }

 

    public void Remove(string name)

    {

        BaseRemove(name);

    }

 

    public void RemoveAt(int index)

    {

        BaseRemoveAt(index);

    }

}

Nothing interesting or insightful here.

And a simple configuration element:

public class TimelyHeaderElement : ConfigurationElement

{

    [ConfigurationProperty("Url", IsRequired = true)]

    public string Url

    {

        get { return (string)this["Url"]; }

        set { this["Url"] = value; }

    }

 

    [ConfigurationProperty("BeginDate", IsRequired = true)]

    public DateTime BeginDate

    {

        get { return (DateTime)this["BeginDate"]; }

        set { this["BeginDate"] = value; }

    }

 

    [ConfigurationProperty("EndDate", IsRequired = true)]

    public DateTime EndDate

    {

        get { return (DateTime)this["EndDate"]; }

        set { this["EndDate"] = value; }

    }

}

Theme Modifications

In order to make the header images (a.k.a. "Timely Headers") work, I had to make some changes to my BlogEngine.NET theme.  My theme is based on the "Inove" BlogEngine theme.

• Replaced the HTML div, <div id="header">, with an ASP.NET panel, <asp:Panel runat="server" CssClass="header" ID="HeaderControl">.
• Changed my theme style sheet to change the id header (#header) to a class (.header).
• Added the following code in the site.master Form_Load method.

TimelyHeaderConfigurationSection section =

    (TimelyHeaderConfigurationSection)ConfigurationManager.GetSection("TimelyHeaders");

 

if (section == null) return;

if (section.Enabled == false) return;

 

// if we have more than one, we want the one that has the LATEST begin date.

TimelyHeaderElement header =

    section

    .Headers

    .Cast<TimelyHeaderElement>().Where(e =>

        e.BeginDate <= DateTime.UtcNow && e.EndDate >= DateTime.UtcNow)

    .OrderBy(e => e.BeginDate)

    .FirstOrDefault();

 

if (header != null)

{

    this.HeaderControl.BackImageUrl = header.Url;

}

else if (!string.IsNullOrEmpty(section.DefaultUrl))

{

    this.HeaderControl.BackImageUrl = section.DefaultUrl;

}

Note that I'm using LINQ, so your web application will have to have LINQ assemblies referenced.

Configure for Use

Register the configuration section in the configSections section:

<section name="TimelyHeaders"

        type="Funkymule.BlogEngine.Configuration.TimelyHeaderConfigurationSection, Funkymule.BlogEngine"/>

Add date ranges for specific headers in the registered configuration section:

<TimelyHeaders Enabled="true">

    <Headers>

        <clear />

        <add Url="~/Images/HamBdayHdr.jpg"

            BeginDate="3/20/2009"

            EndDate="4/3/2009" />

    </Headers>

</TimelyHeaders>

Now, when my blog pages load between March 20th and April 3rd, visitors will be greeted with a reminder of my son's birthday.

Note that when two Timely Headers are configured for a specific date, the one that has a BeginDate later than the other is used.

Simple, but effective.

Update: This post is outdated.  It kinda sucks.  Please don't use this.  A much, much, much simpler solution is posted here.

Comment on this
Development
blogengine

When using the [ usercontrol: …] tag in BlogEngine.NET posts, it really annoys me that they are rendered as literals in the feed "location".  So I wrote this little extension (my first extension, actually), to replace the [ usercontrol: …] tags with something a little better for feeds:

(darn you Windows Live Writer!  Why are you continually messing up my thumbnail?)

Configured to replace my Media Gallery User Control with the text "View article for this Media Gallery."  It will also accept any other user control file names, and replace with pleasing text.

Not very fascinating code:

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using BlogEngine.Core.Web.Controls;

using BlogEngine.Core;

using System.Text.RegularExpressions;

using System.Data;

 

[Extension("Fixes [ usercontrol:...] tag in Feeds for configured user controls", "1.0", "Funkymule")]

public class UserControlFeedFixup

{

    private static ExtensionSettings _settings;   

 

    static UserControlFeedFixup()

    {

        Post.Serving += new EventHandler<ServingEventArgs>(Post_Serving);

 

        ExtensionSettings settings = new ExtensionSettings("UserControlFeedFixup");

        settings.AddParameter("UserControlName", "User Control File Name", 255, true);

        settings.AddParameter("ReplacementText", "Replace with", 255, true);

 

        ExtensionManager.ImportSettings(settings);

        _settings = ExtensionManager.GetSettings("UserControlFeedFixup");

    }

 

    private static void Post_Serving(object sender, ServingEventArgs e)

    {

        if (e.Location == ServingLocation.Feed)

        {

            foreach (DataRow row in _settings.GetDataTable().Rows)

            {

                string pattern = @"\[ usercontrol:.*?/User controls/" + row["UserControlName"] + @".*?\]";

                e.Body = Regex.Replace(e.Body, pattern,

                    row["ReplacementText"].ToString(), RegexOptions.IgnoreCase | RegexOptions.CultureInvariant);

            }

        }

    }

}

Note: In order to use the above code, you have to remove the space between the opening square bracket and the word "usercontrol:".  If I spelled it correctly, BlogEngine would try to load a user control here in the code…and we don't want that!

Comment on this
Development
blogengine

The Quote of the Day post that I wrote earlier was my first widget for BlogEngine.net.  I quickly was not terribly pleased with it, so I made a few changes.

The biggest changes was the “one quote per day” vs “one quote per request” functionality.  Per request was too many changes…or what I call “shuckin’ and jivin’.”  One per day was not allowing my mindless quotes to be displayed too often.

So I made a change to the configuration to allow the quote to change every request, every minute, every hour, or every day.

So my edit.ascx file was changed to support a drop down combo box for the setting:

<asp:DropDownList ID="FrequencyBox" runat="server" />

and very minor code changes to handle the settings:

protected void Page_Load(object sender, EventArgs e)

{

    if (!Page.IsPostBack)

    {

        FrequencyBox.DataSource = Enum.GetNames(typeof(ChangeFrequency));

        FrequencyBox.DataBind();

 

        FrequencyBox.SelectedValue = ChangeFrequency.Always.ToString();

 

        StringDictionary settings = GetSettings();

        if (settings.ContainsKey("ChangeFrequency"))

        {

            FrequencyBox.SelectedValue = settings["ChangeFrequency"];

        }

    }

}

 

public override void Save()

{

    StringDictionary settings = GetSettings();

    settings["ChangeFrequency"] = FrequencyBox.SelectedValue;

    if (string.IsNullOrEmpty(settings["ChangeFrequency"]))

        settings["ChangeFrequency"] = ChangeFrequency.Always.ToString();

    SaveSettings(settings);

}

and another small change in the data object:

public static Quotation GetNextQuotation(ChangeFrequency frequency)

{

    using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

    {

        Random r = _random;

 

        switch (frequency)

        {

            case ChangeFrequency.Daily:

                r = new Random(DateTime.Now.DayOfYear);

                break;

            case ChangeFrequency.Hourly:

                r = new Random(DateTime.Now.DayOfYear ^ (int)DateTime.Now.TimeOfDay.TotalHours);

                break;

            case ChangeFrequency.Minutely:

                r = new Random(DateTime.Now.DayOfYear ^ (int)DateTime.Now.TimeOfDay.TotalMinutes);

                break;

            case ChangeFrequency.Always:

                // just leave r equal to the _random

                break;

        }

 

        return ctx.QuotationSet.OrderBy(q => q.Added)

            .Skip(r.Next(0, ctx.QuotationSet.Count() - 1)).First();

    }

}

This should make the widget a little more flexible.  Using different random seeds ensures that the first “random” number in the sequence will be consistent with the same seed, and means I don’t have to maintain a timer, or state from previous requests.

Comment on this
Development
blogengine

Yeah, yeah.  It’s been done before.  I know.  I wanted a few things that I couldn’t find with a few minutes of Googling.  And if it takes more than a few minutes, I lose interest.

I wanted to learn to create a BlogEngine.net widget, I wanted the quotes stored in SQL Server, and I wanted to use Entity Framework for the data access.  The others I have seen are pretty cool, but I don’t really like storing the data in the freeform StringDictionary values that go with the widget framework.

It turns out that creating a widget with BlogEngine.net is pretty easy.  There should be hundreds of tutorials around, so I won’t bore anyone with the details.

Database Schema

Simple schema.  Just a little example of what I am doing.

Data Objects

I typically use Linq to Sql in these types of small apps, but it’s been announced that Linq to Sql is “on its way out” and EF is the “preferred” method of access.  Since I use a custom code-generated EF framework at work, I went ahead and wrote this widget using EF.

I have an assembly for all my BlogEngine.net stuff, so I added the quotes data objects into that assembly.  Any referenced assembly (or App_Code, etc) will work.

Again, nothing complicated here.  Changed up some names.

Since I would be using ASP ObjectDataSource, I needed some static methods for access.  Here’s the class I used.

public class Quotations

{

    private static Random _random = new Random();

 

    private static string ConnectionString

    {

        get

        {

            return string.Format(

                "metadata=res://*/Data.QuotationModel.csdl|" +

                "res://*/Data.QuotationModel.ssdl|" +

                "res://*/Data.QuotationModel.msl;" +

                "provider=System.Data.SqlClient;" +

                "provider connection string=\"{0}\"",

            ConfigurationManager

                .ConnectionStrings["BlogEngine"].ConnectionString);

        }

    }

 

    public static Quotation GetNextQuotation(bool instancePerDay)

    {

        using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

        {

            Random r = _random;

 

            if (instancePerDay)

            {

                r = new Random(DateTime.Now.DayOfYear);

            }

 

            return ctx.QuotationSet.OrderBy(q => q.Added)

                .Skip(r.Next(0, ctx.QuotationSet.Count() - 1)).First();

        }

    }

 

    public static void Insert(Quotation quote)

    {

        using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

        {

            ctx.AddToQuotationSet(quote);

            ctx.SaveChanges(true);

        }

    }

 

    public static void Save(Quotation quote)

    {

        using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

        {

            ctx.Attach(quote);

            ctx.SaveChanges(true);

        }

    }

 

    public static int GetCount()

    {

        using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

        {

            return ctx.QuotationSet.Count();

        }

    }

 

    public static Quotation[] Get()

    {

        using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

        {

            return ctx.QuotationSet.ToArray();

        }

    }

 

    public static Quotation[] Get(int start, int count)

    {

        using (BlogEngineEntities ctx = new BlogEngineEntities(ConnectionString))

        {

            return ctx.QuotationSet.OrderBy(q => q.Added)

                .Skip(start).Take(count).ToArray();

        }

    }

}

There’s not much of note about the code.  The only thing worthy of note is the code:

if (instancePerDay)

{

    r = new Random(DateTime.Now.DayOfYear);

}

What I’m doing here is using the “instancePerDay” option to make sure the quote stays the same all day.  If this option is true, the quote will be the same on every request all day.  If it is false, the quote will randomize on each page request.

By using the Random object with a seed of the current day of year, the random number generator will give me the same sequence all day.

Update: I’ve made this more flexible, allowing for changes per day, hour, or minute.  Code changes are posted here.

The Widget

The widget is a simple .aspx file with two labels.  Overriding the LoadWidget() method:

public override void LoadWidget()

{

    LoadSettings();

    Quotation quote = Quotations.GetNextQuotation(_instancePerDay);

 

    lblQuotation.Text = Server.HtmlEncode(quote.Quote);

    lblQuotationAuthor.Text = Server.HtmlEncode(quote.Author);

}

 

private void LoadSettings()

{

    StringDictionary sd = GetSettings();

 

    if (!bool.TryParse(sd["InstancePerDay"], out _instancePerDay))

        _instancePerDay = false;

}

You could also use Literals with a mode of encode, or use the Anti Cross Scripting library from Microsoft…but values from the database should always be encoded.

The Edit Control

The widget returns true from the IsEditable property, so I need to provide an editor.  I used databinding, so loading and saving the actual data is handled by the data object described above.

The asp object data source looks like this:

<asp:ObjectDataSource EnableCaching="true" ID="QuoteSource"

    runat="server" DataObjectTypeName="Funkymule.BlogEngine.Data.Quotation"

    TypeName="Funkymule.BlogEngine.Data.Quotations"

    ConvertNullToDBNull="true" InsertMethod="Insert" SelectCountMethod="GetCount"

    SelectMethod="Get" UpdateMethod="Save" EnablePaging="true"

    StartRowIndexParameterName="start" MaximumRowsParameterName="count" />

The TypeName is the data object we created above.  The *Method and *ParameterName properties match the methods from that object.  The DataObjectTypeName is the data object that I use as a parameter to the methods, so I don’t have to provide one parameter for each property.  In this case, it’s not that big of deal since there are so few properties…but again, this is an exercise in learning, so I tried to do it the right way.  The implementation of the DataObjectTypeName is the Entity Framework generated class.

Now, the code behind the control is simple:

protected void Page_Load(object sender, EventArgs e)

{

    if (!Page.IsPostBack)

    {

        bool instance = false;

 

        StringDictionary settings = GetSettings();

        if (settings.ContainsKey("InstancePerDay"))

        {

            bool.TryParse(settings["InstancePerDay"], out instance);

        }

 

        InstancePerDayCheckbox.Checked = instance;

    }

}

 

public override void Save()

{

    StringDictionary settings = GetSettings();

    settings["InstancePerDay"] = InstancePerDayCheckbox.Checked.ToString();

    SaveSettings(settings);

}

The only thing of interest here is that I have one value which is actually a setting, and not part of the quote data.  This value is not databound, so I’m handling it all manually.

Anyway…when it’s all said and done…here’s the results:

Take it for what it’s worth.

Check the updates here.

--Coose

Comment on this
Development
blogengine

Well, I finally had enough of DotNetNuke.  It's an OK platform, but as a professional developer and architect, I would hardly say it's great.  What a bloated, cumbersome, difficult (and not pretty) platform to work with.

So, now I'm moving everything to Graffiti.  Here's my review:

Update: March 21st.

Yeah...Graffiti sucks.  It has a lot of potential...but there are a few reasons that I moved off of it after 2 days:

• Development appears to have stopped.  They removed their roadmaps, and stopped posting to their own forums.
• Templating engine required a lot of propietary macros and .view files...dot really .NET friendly.
• UserControls were not easily implemented.  I was able to write a plugin to load any UserControl from an .ascx file, but due to the way it was hooked up, Postbacks and ASP.NET AJAX would not work.
• Closed source.

There's a few more reasons that I moved off of it...but I don't want to trash the product.  It had great potential.

So anyway...I moved to BlogEngine.net.  I wrote a program to manually read the Graffiti SQL tables, and insert into the BlogEngine.net SQL tables. (I didn't want to use the default xml file provider).

Let's see how long till I change again!

Comment on this
Mike's Blog | Development
blogengine