Now and then, you’ll want to enable image in the comment of your wordpress blog. There are many ways to achieve this, like

  • directly enter a full html code
<img src="http://domain.com/your_image_URL.png" alt="" />

,

  • or use a third party plugin (e.g. comment images) to allow readers upload images to the media library.

For the html way, you are really frustrate your readers if they may not even know what’s html. For the upload way you are bringing big security threat to your own blog.

So today I am going to tell you a new way: display image directly from URL retrieved in comment content.
The concept is simple: if your readers want to embed an image in the comment, they just enter the image url in the coment form. That means they have to upload the images to somewhere else before they can get the image url. Fortunately there are many handy image host websites out there, a good example is imgur.com
Ok, now lets get back to the code snippet.

1. We’ll use a filter to process the comment content.
add_filter(‘preprocess_comment’). More details here.

2. Check if there is valid image url.
/((https|http|ftp):\/\/){1}.+?.(jpg|gif|bmp|bnp|png)$/is

3. Not all users have the rights of inserting

<img src="" />

, so we need do some tricks to allow img related tags in the comment.

global $allowedtags;
$allowedtags['img'] = array('src' => array (), 'alt' => array ());

4. Here comes the full code snippet. Put it somewhere in your functions.php.

/**
 * Display image directly from URL retrieved in comment content
 * http://clonetemplates.com/?p=546
 */
add_filter('preprocess_comment', 'ct_auto_comment_image');
function ct_auto_comment_image( $comment ) {      

        global $allowedtags;
        $content = $comment["comment_content"];
        $content = preg_replace('/((https|http|ftp):\/\/){1}.+?.(jpg|gif|bmp|bnp|png)$/is','<img src="$0" alt="" />',$content);
        //allow img tag
        $allowedtags['img'] = array('src' => array (), 'alt' => array ());      

        $comment["comment_content"] = $content;
    return $comment;
}