Al Nyveldt

 BE Theme Tip: Adding default images for each category

-   Jul 28, 2009 -   BlogEngine.NET, Development -   blogengine.net, theme

When I looked around at blog templates on different sites, I’m running across more and more templates that expect each post to have an image or two with it in the display template.  I think it looks great, but I also think I would post even less if I had to have images in the certain sizes for each and ever post I wanted to make. In thinking about it however, I decided it would work out pretty well for me if I picked out an image for each category and let my theme put the correct image into the template as needed.  In my theme, I have only 2 image sizes and there are different enough that I decided to make images for both sizes, but if they were more similar, you might be able to get away with a single image and resizing it on the fly. Since these images are part of how the post is displayed, the work for this is part of the PostView.ascx of your theme.  I used the code behind file for this as well and added the following into my custom PostView class. 1: protected string CategoryImage; 2: protected string FeaturedImage; 3: protected void Page_Load(object sender, EventArgs e) 4: { 5: string imageRoot = Utils.AbsoluteWebRoot.ToString() + 6: "themes/myTheme/images/categories/"; 7: string catImageName; 8: if (Post.Categories.Count > 0) 9: catImageName = Post.Categories[0].Title.Replace(".", ""); 10: else 11: catImageName = "NoCategory"; 12: 13: CategoryImage = imageRoot + catImageName + ".jpg"; 14: FeaturedImage = imageRoot + catImageName + "Featured.jpg"; 15:  16: base.Page_Load(sender, e); 17: } Now I had a CategoryImage and FeaturedImage url string that I could use in my PostView.ascx to show the correct image for each post. 1: <img src="<%=CategoryImage %>" alt="<%=Server.HtmlEncode(Post.Title) %>" /> It is a relatively simple trick, but gives you some neat customization on your blog.  This concept can be used to do countless customizations to the PostVIew, CommentView and even the Site.Master pages in your theme.

 BE Theme Tip: Make the front page look different

-   Jul 25, 2009 -   BlogEngine.NET, Development -   blogengine.net, theme

I spent some time over the past few days working on a new theme for this blog.  It had been a while since I had made a BlogEngine theme, but the process is still the same as it was 2 years ago.  It is a fairly easy process and it really allows for a lot of customization with just the smallest amount of code. I thought I would share a few of the techniques I used in making this theme over a few blog posts.  Hopefully, they will come in handy for someone making their own theme and maybe inspire some more interesting themes in the BlogEngine realm. One of the most interesting parts of the new theme is the different look on the front page of my blog.  The front page on a BlogEngine blog is usually a list of posts (although this can be overridden to be a particular page in the admin section).  The list of posts or post list is simply a display of a set number of posts one after another.  Each post is displayed using the PostView.ascx of the specific theme. The number of posts depend on the settings you have chosen in your admin section.  There is also a setting that determines if the post is displayed in full in the post list or if just the description (or first so many characters) are displayed. Armed with this basic information, we know that all we need to do is put a little custom code in the PostView.ascx to change the look of the page based on what type of page it is.  In my case I really only care if I’m displaying the post list or not, but you could easily write your code to check for a specific page, a particular categories or whatever. The first thing I did was to make an enum called PageStyle with 3 values (Page, Front, and Featured).  Page is for general formatting.  Featured is the top item on my front page and Front is the other items on my front page. I then added a ViewStyle variable to my theme’s PostView class in PostView.ascx.cs and the code in in the page load to set ViewStyle based on what page is being displayed.  A trimmed down snippet of this code is below. 1: protected PageStyle ViewStyle; 2:  3: protected void Page_Load(object sender, EventArgs e) 4: { 5: string path = Request.RawUrl.ToLower(); 6: if (path.LastIndexOf('/') > -1) 7: path = path.Substring(path.LastIndexOf('/') + 1); 8: if (path.StartsWith("default.aspx") || path.StartsWith("blog.aspx") || path == "") 9: { 10: ViewStyle = PageStyle.Front; 11:  12: // Latest Post? 13: BlogEngine.Core.Post temp = Post.Next; 14: if (temp == null) 15: ViewStyle = PageStyle.Featured; 16: } 17: else 18: { 19: ViewStyle = PageStyle.Page; 20: } 21:  22: base.Page_Load(sender, e); 23: } Now that I have ViewStyle set, I can use this in my PostView.ascx page to dramatically change the look of the html that will result for the different type of pages being called.  I’ve put a few samples in the snippet below. 1: <% if (ViewStyle == PageStyle.Page) { %> 2: <div class="post-page"> 3: ... 4: </div> 5: <% } %> 6:  7: <div class="<%=ViewStyle == PageStyle.Page ? "post-title" : "junk" %>"> 8: ... 9: </div> Personally, I like changing the classes of my divs and span tags where possible and use CSS to make the changes. Sometimes however, I’ve needed to actually use an if block to make the display look as I’d like. A quick note for those trying this with an existing theme.  Most themes I’ve seen do not have a code behind file for the PostView.ascx.  You can make one, but make sure you reference it in the PostView.ascx file and that your cs file inherits from BlogEngine.Core.Web.Controls.PostViewBase.  If you forget this, you won’t get anything to work. Hopefully, this is helpful to someone.  If you have questions or I need to be more clear, let me know in the comments.

 Most Popular Posts Extension and Widget

-   Mar 02, 2008 -   BlogEngine.NET, Development -   blogengine.net, control, theme, widget

A few weeks back, I read a post from Damien Guard on his favorite WordPress plugins.  While reading over his list, I felt BlogEngine.NET really had them all cover and then I got the last one, WP-PostViews.  The plug in as you might guess, counts, post views and has a side bar widget for displaying the most popular content.  Damien writes: Another visitor-retention seeking effort. By presenting the most popular content in the sidebar I'm hoping to entice people to look at a couple of other posts and hit the magic RSS subscribe button. Well, I decided to whip up the BlogEngine.NET version which consists of an extension to count the post views and a widget to use in your theme.  The extension could certainly be more elegant, but it gets the job done. The widget is a little more complex, but not much.  It reads in the counters, determines the top posts, and displays them in a list.  You can control how many of the top post will display in the widget with the Top property (which is expecting an integer of how may posts to display).  There is also a ShowViewCount property which is expecting a true or false.  If you set it to true, it will show the world the actual post counts it is generating.  If you set it to false, it is only visible when you are logged in.  (Note: The top posts are cached and will only update on your site every 30 minutes.  No point in calculating these number too frequently.) To set this up, download the files below and unzip them.  The extension file (TopPosts.cs) needs to be placed in your extensions folder which is at App_Code/Extensions.  The Widget files should go in the theme you plan to add the widget to.  Once you have the widget files in the theme folder, you can go ahead and add the widget to the site.master file or wherever you'd like.  The correct syntax for the user control will look something like the following. If you have issues installing the widget, please see the Installing the Quote of the Day widget screencast.  The process is very similar. I put together a screencast on the creation of the extension and was planning to do the same for the widget, but they seem so simple and redundant, I'm not sure I'll follow through with completing them. Let me know if you are interested in these.  If there is enough interest, I'll make them happen. Downloads TopPostsExtension TopPostsWidget (for BlogEngine.NET 1.3)

 Quotes of the Day Widget Installation and Update

-   Feb 27, 2008 -   BlogEngine.NET, Development, Screencasts -   blogengine.net, control, screencast, theme, video, widget

Over the past few weeks, I've received a bunch of questions on using the Quote of the Day widget so I had been planning to put together a quick walk through screencast to show you how to use since I really didn't cover usage very thoroughly in my earlier post. Since I was working on a new theme earlier this week, it seemed like the right time to do this, but I also find a minor bug with the control when previewing themes so I made a small change to correct this.  It was a minor fix, but if you are starting fresh or feel like upgrading, I'll include the updated control at the end of this post. The screencast walks you through adding the widget from download to theme update.  I don't cover making changes to your CSS to make it look the way you want in your theme, but I've tried in in 4 themes already and haven't needed to do anything special to make the widget look right.  I'll include the register and usage line below so you can see them more clearly and don't have to copy notes while watching the screencast. Again, this widget works fine in 1.2 and 1.3.  I'll make an updated version when 1.4 gets closer.  You can download the QuotesWidget 1.0.1 here.

 Customizable BlogEngine.NET Theme: NonZero

-   Jan 27, 2008 -   BlogEngine.NET, Screencasts -   blogengine.net, screencast, theme, video

I finally finished up my customizable BlogEngine.NET theme.  I started it long ago to see how easy it would be as well as how much you could actually do within a BlogEngine.NET theme without changing the code base.  I ended up taking the theme much further than a theme should go and decided to scale it back to what you see here. A customizable theme to me is a theme that has options to change the look and display without requiring the user to work with the code pages.  I went ahead and made a screencast to show you how it looks to an administrator and see exactly what is customizable about this theme.  For those unwilling to sit through the 90 seconds or so, here are the items that can be customized in this theme. Layout: fixed or fluid (fixed to 1024 width or to fill the screen) Color: 5 color styles to choose from Columns: 2 or 3 column layout Open Text section: Just a title and content box that can be filled in with whatever you'd like to see.  (I use it for an "About Me" section on the sidebar.) I'm excited to see customizable themes like this mixed with the new widget framework in the next version of BlogEngine.NET.  It will make it a snap for people to make their blogs look exactly how they want.  A lot of the features I had added into this theme originally removing items, reordering, etc, is done much better in the the widget framework that Mads Kristensen has started. That's it.  Go ahead and try it out.  There are likely some issues with it, so if you find any problems, let me know.  (You are welcome to send me the fix as well.) Download: Theme-NonZero1.3.zip