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.

Segui Informarea su Telegram

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.

Segui Informarea su Telegram

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.