Related Posts con thumbnails in BlogEngine.net

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.

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());
}

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.