BlogEngine.net: Featured Posts Rotator with JQuery, Revisited

0 Condivisioni

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.

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;

Settings featured posts rotator revisited

 

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)

 

0 Condivisioni

Fabrizio Cannatelli

Fondatore di Informarea.it, è un appassionato di informatica. Ha lavorato per molti anni come Analista Programmatore presso varie aziende utilizzando diversi linguaggi di sviluppo, oggi svolge un lavoro completamente diverso ma la voglia di comunicare e di condividere con il web i suoi studi e le sue curiosità lo hanno spinto a far nascere questo blog non solo per esprimere e mostrare la passione per questo mondo, ma anche per confrontarsi con nuove esperienze di sviluppo.

Fabrizio Cannatelli

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.