Using Images in the BlogEngine Comments

30. January 2008 21:23 by rtur.net in BlogEngine  //  Tags: ,   //   Comments (8)

Most of the web applications will not let you use HTML as form input for security reasons. And this is why BlogEngine has BBCode extension - to provide you with ability to define which HTML tags you want visitors be able to use. But it has it's own limitations and can't handle some of the HTML tags without little overhead. For example, I wanted to let visitors to use images in their comments, so I went to extension manager/BBCode and defined [img] code. Problem here is that image tag has specific syntax and BBCode does not set to handle it. I had to modify Parse method to process image tag properly. All I did is added a check to see if code is "img" and, if it is, I use custom parsing. Otherwise BBCode uses default code processing.

if (code == "img")
{
  string regex = @"\[img\].*\[/img\]";
  MatchCollection matches = Regex.Matches(body, regex);
 
  if (matches.Count > 0)
  {
    foreach (Match match in matches)
    {
      string imgSrc = match.Value.Replace("[img]", "").Replace("[/img]", "").Trim();
      string imgTag = string.Format("<img title=\"\" src=\"{0}\" />", imgSrc);
      body = body.Replace(match.Value, imgTag);
    }
  }
}
else ...

One more thing. Because visitors can not upload images to the site, all images suppose to be on the internet and have "http:" or "www" in the source path. And BlogEngine has "ResolveLinks" extension that will automatically turn everything with "http:", "www" etc. into the hyperlinks in the comments. That is great, but obviously I need to ask this extension leave alone my images.

if (e.Body.Contains("src=\"" + match.Value) || e.Body.Contains("[img]" + match.Value))
  continue;

With this taken care of, everything seems to be working just fine. Now if you want to illustrate your point with image in the comment, just type in path to the image, select it and click BBCode "img" button.

BBCode.zip (2.72 kb)

Comments (8) -

rtur
rtur
1/30/2008 9:47:43 PM #

http://rtur.net/darkblog/image.axd?picture=katuberling.png

This is an example of the image you can use in your comments. Just copy or type in a path to your image file, select it and click "img" button (on the right and just above input box)

Cristiano
Cristiano
1/31/2008 4:04:57 AM #

Good work!

IMHO there is a aproblem: to give the possibility to the users of "insert" images in the web page is a risk. If the images contains malicious code ? What do you think ?

rtur.net
rtur.net
1/31/2008 9:32:11 AM #

IMHO there is a aproblem: to give the possibility to the users of "insert" images in the web page is a risk. If the images contains malicious code ? What do you think ?

Yes, there is certain risk involved and this is why it will never be a part of core BlogEngine code.
I might consider adding some validation though, for example pinging image path making sure it exists etc...

Lucas
Lucas
3/31/2008 5:32:29 PM #

http://artegami.com/wp-content/uploads/2007/05/optimisim.jpg

Lucas
Lucas
3/31/2008 5:35:02 PM #

hola

Test
Test
9/18/2008 12:03:02 AM #

http://rtur.net/darkblog/image.axd?picture=katuberling.png

jordi
jordi
11/11/2008 8:01:02 AM #

kjdhksgdkhsd

Slim Fit Blog
Slim Fit Blog
3/17/2009 12:33:01 AM #

its more unique to see people who's slight making the comment

Comments are closed

Recent Comments

Comment RSS