Related Posts con thumbnails in BlogEngine.net

0 Condivisioni

Oggi vediamo insieme come inserire nei Posts Correlati di BlogEngine.net un’immagine (thumbnails) come anteprima dei posts.

Andiamo ad aprire il file RelatedPosts.cs presente nella cartella App_Code/Controls e eseguiamo i seguenti passi.

BlogEngine.net

Sostuiamo la seguente funzione CreateList:

private void CreateList(IEnumerable<IPublishable> relatedPosts)
{
var sb = new StringBuilder();

const string LinkFormat = "<a href=\"{0}\">{1}</a>";
const string DescriptionFormat = "<span>{0}</span>";
sb.Append("<div id=\"relatedPosts\">");
sb.Append("<h3>+++</h3>");
sb.Append("<div>");

var count = 0;
foreach (var post in relatedPosts)
{
if (post != this.Item)
{
sb.Append(string.Format(LinkFormat, post.RelativeLink, HttpUtility.HtmlEncode(post.Title)));
if (this.ShowDescription)
{
var description = post.Description;
if (description != null && description.Length > this.DescriptionMaxLength)
{
description = string.Format("{0}...", description.Substring(0, this.DescriptionMaxLength));
}
if (String.IsNullOrEmpty(description))
{
var content = Utils.StripHtml(post.Content);
description = content.Length > this.DescriptionMaxLength
? string.Format("{0}...", content.Substring(0, this.DescriptionMaxLength))
: content;
}

sb.Append(string.Format(DescriptionFormat, description));
}

count++;
}

if (count == this.MaxResults)
{
break;
}
}
sb.Append("</div>");
sb.Append("</div>");
RelatedPostsCache[this.Item.Id] = sb.ToString();
}

 

Con questa nuova versione:

private void CreateList(IEnumerable<IPublishable> relatedPosts)
{
var sb = new StringBuilder();
			
string image = "<a href=\"{0}\">{1}</a>";
const string LinkFormat = "<a href=\"{0}\">{1}</a>";
const string DescriptionFormat = "<span>{0}</span>";
sb.Append("<div id=\"relatedPosts\">");	
	
sb.Append("<h1>+++</h1>");
sb.Append("<br /><table><tr>");			
	           
   var count = 0;
foreach (var post in relatedPosts)
{
if (post != this.Item)
{
	     sb.Append("<td style=\"width:110px\" valign=\"top\">");		
sb.Append(string.Format(image,post.RelativeLink, getImage(true,post.Content,HttpUtility.HtmlEncode(post.Title))));
	     sb.Append(string.Format(LinkFormat, post.RelativeLink, HttpUtility.HtmlEncode(post.Title)));			
					
if (this.ShowDescription)
{
var description = post.Description;
if (description != null && description.Length > this.DescriptionMaxLength)
{
description = string.Format("{0}...", description.Substring(0, this.DescriptionMaxLength));
}

if (String.IsNullOrEmpty(description))
{
var content = Utils.StripHtml(post.Content);
description = content.Length > this.DescriptionMaxLength
? string.Format("{0}...", content.Substring(0, this.DescriptionMaxLength))
: content;
}

}

sb.Append("</td>");
count++;
}

if (count == this.MaxResults)
{
break;
}

sb.Append("</tr></table>");
sb.Append("</div>");
RelatedPostsCache.Add(this.Item.Id, sb.ToString());
}

Related Posts

Infine aggiungiamo le due funzioni GetImage e GetSrc utili a inserire i nostri Thumbnails tra i post correlati:

 

public string getImage(bool ShowExcerpt, string input, string Titolo)
{
if (!ShowExcerpt || input == null)
return "";

string pain = input;
string pattern = @"<img(.|\n)+?>";
System.Text.RegularExpressions.Match m = System.Text.RegularExpressions.Regex.Match(input, pattern,
System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Multiline);
if (m.Success)
{
string src = getSrc(m.Value);
string img = string.Format("<img width='95' height='88px' class='left' align='left' alt=\"" + Titolo + "\" style=\"background:#F0F0F0; border:none; padding:5px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;\" {0}  />", src);
return img;
}
else
{
return "";
}
}


string getSrc(string input)
{
string pattern = "src=[\'|\"](.+?)[\'|\"]";

System.Text.RegularExpressions.Regex reImg = new System.Text.RegularExpressions.Regex(pattern,
System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.Multiline);
System.Text.RegularExpressions.Match mImg = reImg.Match(input);

if (mImg.Success)
{
return mImg.Value;
}
return "";
}

In conclusione abbiamo aggiunto la funzione GetImage nella CreateList e sostituito <div> con una formattazione tabellare. Altro passo da fare è intervenire nel file Post.aspx per agire sulla seguente riga di codice:

<blog:RelatedPosts runat="server" ID="related" MaxResults="5" ShowDescription="false" DescriptionMaxLength="100" Headline="Potrebbe interessarti anche:" Visible="false" /> >

 

In pratica abbiamo cambiato il valore di MaxResults da 3 a 5 (si tratta del numero dei link con immagine che vogliamo far apparire tra i post correlati), impostato il mostra descrizione (ShowDescription) a false, e inserito il valore Headline, utile per personalizzare il titolo dei post correlati: nel nostro caso “Potrebbe interessarti anche:”.

Spero di non aver dimenticato nulla, vi allego comunque il file RelatedPosts.cs (10,08 kb) (prima di sostituirlo, fate sempre un backup dell’originale).

 

Ciao alla prox.

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.