BlogEngine.net: Featured Posts Rotator with JQuery, Revisited

I needed a slideshow to choose the best post to grow to use in my home page. So I used the extension of Michael Baird adapting it to the new version of BlogEngine.net 2.7 and adding new features. It’s a Featured Posts Rotator Revisited.

For starters here are the changes made:

• adaptation to BlogEngine 2.7 (should work with versions 2.5 and 2.6);
• in the Admin Settings > Extension > FeaturedPostsRotator where you can choose post and pictures, sorting of the articles alphabetically to help you determine when you have many posts;
• connection with the comments Disqus;
• addition of the next and previous arrows;

This extension uses JQuery and a JQuery plugin called InnerFade.

How to use it:

• Extract zip file and copy files to corresponding locations in your blog;
• Modify styles in style.css in User controls/FeaturedPostsRotator/styles.css to your liking;
• Add <blog:FeaturedPostsRotatorControl ID=”Featured” runat=”server” /> to your themes site.master, if you have Razor Theme support you can put this command in file default.aspx of your root. (for more information see the ReadMe.txt in zip file)
  
• Go to Admin > Extension > FeaturedPostsRotator > Edit and select a post and add an image (jpeg or gif).

Other customizations:

1) For who don’t have comments disqus can to change this line of code in FaturedPostsRotatorControl.cs at GetImagesHtmlList()

sb.AppendFormat("<a class=\"accent\" href=\"{0}#disqus_thread\">{1}</a>", post.PermaLink, Resources.labels.comments);

With this code:

sb.AppendFormat("<a class=\"accent\" href=\"{0}#comments\">{1} ({2})</a>", post.RelativeLink, Resources.labels.comments, post.ApprovedComments.Count);

2) For to change height and width of the image when you make the upload in Settings you must to change parameter in this line of code in FaturedPostsRotatorControl.cs at GetImagesHtmlList()

sb.AppendFormat("<a href=\"{0}\" title=\"{1}\"><img src=\"{2}\" alt=\"{1}\" height=\"260\" width=\"638\" /></a>", post.RelativeLink, HttpUtility.HtmlEncode(post.Title), featuredImage);

3) For to change measures of slideshow you can change “containerheight” in FaturedPostsRotatorControl.cs at AddJavaScriptToPage() and height and width in CSS file in User_controls > FeaturedPostsRotator > Style.css.

4) In my Theme that work with Razor Theme support i have modified my style.css so:

#content #colLeft #featured ul, #content #colLeft #featured ol {
	width: 638px;
	height: 260px;
	list-style: none;
	overflow: hidden;	
	padding:0px 0px 0px 0px;
	margin:0px;
}
#content #colLeft #featured ul li, #content #colLeft #featured ol li  {
	width: 638px;
	height: 260px;
	position: relative;
	z-index: 1;
	padding:0px;
	margin:0px;
	list-style: none;
}

I hope this can help you.

You can see an example of this slideshow in home page of this website. I hope you enjoy it.

FeaturedPostRotator_Revisited 1.0.zip (21,20 kb)