You must have noticed a common trend these days in various Blogs of showing a picture thumbnail to give an idea about the article. Remember, a picture is worth thousand words.
Well, the trend is catching up fast as it has certainly helped increase the page views of the blogs who have implemented it.
We also run a blog using blogengine.net and wanted to implement the same. So, we just twisted some code and got it running in less than 5 minutes.
If you are also running
BlogEngine.net, then use this simple code to have it on your Blog too.
Just copy and paste the following file in the BlogEngine.net's
App_Code\Controls folder.
RelatedPosts.cs (7.12 kb)
If you don't want to download this file and make code changes yourself, then i have given the code at the bottom of this article.
Don't worry, this file does not make any major changes. I have just added two functions to fetch the thumbnail image out of the post code.
Your work is done as soon as you copy and replace the file. The thumbnails will immediately start showing up.
Some points to ponder:
- The code will pick up the very first image that you specify in your post. Other images are ignored. So, if want a specific image to be shown as thumbnail, you should specify it as the first image in your article.
- I myself have implemented this code on my BlogEngine.net blog. The blog you are reading is an example.
- By default, the BlogEngine.net shows a small description of articles with the 'related posts' link. but, as you would agree, it may not look that good when you have thumbnails. if you want to disable the thumbnails, you should change the
following description attribute's value in Post.aspx file to false.
You will find the post.aspx file in BlogEngine's root folder.
- If you are interested in seeing the actual code changes, then here it is. I have made some changes in the function CreateList to accomodate thumbnails. And added two functions named as getImage and getSrc to fetch image thumbnails. You can copy and paste these functions in your BlogEngine.net's App_Code\Controls\RelatedPosts.cs file folder:
///
/// Creates the list of related posts in HTML.
///
/// The related posts.
private void CreateList(List relatedPosts)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
/********************************************************************/
// AM22 Added code to show images in related posts. START
string image = "{1}";
// AM22 Added code to show images in related posts. END
/********************************************************************/
string link = "{1}";
string desc = "{0}";
sb.Append("");
//AM22 changed from p tag to H1. Start
//sb.Append("
+++
");
sb.Append("
+++
");
//AM22 changed from p tag to H1. End
// AM22 commented the div tag and added inside loop Start
//sb.Append("
");
// AM22 added a table
sb.Append("
");
// AM22 End
int count = 0;
foreach (IPublishable post in relatedPosts)
{
if (post != this.Item)
{
// AM22 Added style attribute Start
//sb.Append("");
sb.Append("
");
// AM22 Added style attribute End
/********************************************************************/
// AM22 Added code to show images in related posts. START
sb.Append(string.Format(image,post.RelativeLink, getImage(true,post.Content)));
// AM22 Added code to show images in related posts. END
/********************************************************************/
sb.Append(string.Format(link, post.RelativeLink, HttpUtility.HtmlEncode(post.Title)));
if (ShowDescription)
{
string description = post.Description;
if (description != null && description.Length > DescriptionMaxLength)
description = description.Substring(0, DescriptionMaxLength) + "...";
if (String.IsNullOrEmpty(description))
{
string content = Utils.StripHtml(post.Content);
description = content.Length > DescriptionMaxLength ? content.Substring(0, DescriptionMaxLength) + "..." : content;
}
sb.Append(string.Format(desc, description));
}
//AM22 added end of tag here. start
sb.Append(" | ");
//AM22. end
count++;
}
if (count == MaxResults)
break;
}
//AM22 removed end of div tag from here and added inside loop. start
//sb.Append("");
//AM22 removed end of div tag. end
// AM22 added a table
sb.Append("
");
// AM22 End
sb.Append("
");
_Cache.Add(Item.Id, sb.ToString());
}
/***************************************************************/
// AM22 Added code to show images in related posts. Start
public string getImage(bool ShowExcerpt, string input)
{
if (!ShowExcerpt || input == null)
return "";
string pain = input;
string pattern = @"
";
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("![]()
", 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 "";
}
// AM22 Added code to show images in related posts. END
/***************************************************************/
//PLEASE DO NOT COPY THE CODE WHICH IS SHOWN AFTER THIS LINE (If Any). SOME BROWSERS ARE SHOWING SOME JUNK CODE AFTER THIS //LINE.
That's it. You are done. It won't take more than 2 minutes to complete the whole process and you will have thumbnails on your blogs.
So, no need to use third party scripts to show related links on your blog as they slow down your website. Enjoy.