Enable Images in WordPress Comments

Sometimes you can’t trust users with the ability to leave media in comments, especially on a site where commenting is open to all. If your users are considerate and trustworthy, adding images to comments opens up an opportunity for more discussion. Comment Images is a new plugin that makes it easy for users to upload an image while leaving a comment.

Here’s how your comment form will look when you have this comment form plugin installed:

Images in comments are formatted nicely to fit in the space:

Comment Images features:

  • Notifies the administrator if the plugin is not compatible with their hosting environment
  • Supports PNG, GIF, JPG, and JPEG images
  • Notifies readers if their attached image is not allowed to be uploaded
  • Styles images so that they will fit within the comment display and not “bleed over” into the page
  • Is fully localized and ready for translation

Please note that it is only compatible with the standard WordPress comment form right now and will not work with Jetpack.

Comment Images is not a plugin that I’d recommend for every WordPress site. It would probably work best in a site that is invitation-only or has commenting limited to registered members. Check out the plugin’s homepage for more information and download it for free from the WordPress plugin repository.

Tags

Comments (6)

  1. I think there is no need of any plugin. Do it personally-

    1. Open wp-includes/kses.php

    2. Locate the following line:

    $allowedtags = array (‘a’ => array (‘href’ => array (), ‘title’ => array ()), ‘abbr’ => array (‘title’ => array ()), ‘acronym’ => array (‘title’ => array ()), ‘b’ => array (), ‘blockquote’ => array (‘cite’ => array ()),

    3. Change that line to read like so:

    $allowedtags = array (‘a’ => array (‘href’ => array (), ‘title’ => array ()), ‘abbr’ => array (‘title’ => array ()), ‘acronym’ => array (‘title’ => array ()), ‘b’ => array (), ‘blockquote’ => array (‘cite’ => array ()), ‘img’ => array (‘alt’ => array (), ‘align’ => array (), ‘border’ => array (), ‘height’ => array (), ‘hspace’ => array (), ‘longdesc’ => array (), ‘vspace’ => array (), ‘src’ => array ()),

    4. Save the changed file, and upload.

    The above change enables commenter to use <img src … and several related tags within comments. It does NOT allow any user to upload an image. Consequently, the image must already be hosted somewhere in order to be displayed successfully.

  2. It’s a good plugin if you really, really, really trust your users. The main problem is that there isn’t a max upload size restriction on it so a user could potentially upload a 4mb image to the comments and jack up the entire page render. The author has been saying he’d “get around to it” for ten months.

  3. The plugin needed a whole series of mods but this script limits upload size, which is critical:

    `
    document.forms[0].addEventListener(‘submit’, function( evt ) {
    var file = document.getElementById(‘comment_image’).files[0];

    if(file && file.size < 153600) { // 150k (this size is in bytes)
    //Submit form
    } else {
    //Prevent default and display error
    alert('File size is too large, please reduce and try again');
    evt.preventDefault();
    }
    }, false);
    `

Participate