WordPress Plugin: Comment Image Embedder
December 8th, 2007
Introduction
It’s rather common for a WordPress user to ask how visitors can embed images in the comments section of their blogs. I’ve been asked it a few times myself, and was never sure how to do it… until now.
The Problem
The problem with trying to have an image show up in the comments is that WordPress, by default, strips out all non-essential tags, including image tags.
The Plugin
Comment Image Embedder is a very simple plugin that, once installed, lets your visitors add an image to their comments.
Download
Installation
- Download
- Upload
- Activate
Usage
A link should appear below the comment form, allowing the users to link to an image. Once they input the URL for the image and click OK, the appropriate markup will be added to their comment.
**I do NOT have this plugin activated on my blog so please do not try to leave images in these comments!**
Uploading Images to Comments
If you would like to give your visitor the ability to upload images along with their comment, I have developed a separate WordPress plugin that accomplishes that.
It is available for $97 and includes professional installation by yours truly. Please contact me if interested and I will happily oblige.
Why isn’t it free? It requires a number of changes that must be made to fit your individual system. It’s not a simple drop-in plugin. It took a long time to develop and you’re also paying for my time.
December 13th, 2007 at 6:21 pm
Three possible minor improvements to your plugin:
(a) instead of the “you can add images to your comment” text appearing after the “submit” button and the “notify me of responses to this post” checkbox, and in my case also after the cocomment ‘cocobar’ which appears directly under the textarea,
can yours be inserted directly under the “code allowed” line, above the textarea?
(b) enable multiple image insertion “one image per line”, so if I have a collection I can copy and paste them all in one step
(c) users can already right-click images and select “copy link location” and then paste that into the comment plugin, but for most people that requires too many clicks and scrolls. In Excel and OpenOffice, there is “Paste Special” which allows you to choose if you want to paste the text or the link (…). Can something similar be done on the web?
December 14th, 2007 at 1:04 am
Jonathon,
Thanks for the comment. You’ve got some good ideas…
(a) Not all WordPress themes use the “allowed tags” code above the comment box. It’s something that’s hardcoded into each template. You could hard code the text into that place, though, so the “add image” link is above the comment box.
(b) It’s possible but probably not useful for many people. It’s a good idea but I’ll leave it out of any future releases.
(c) I don’t think so, no. The comment form is just a simple text input. It can’t be used like an advanced text editor.
Thanks!
January 30th, 2008 at 11:49 pm
hey, great plugin!
Im new to php and was wondering which php file calls the embed_image_instructions function? I wanna put the upload image text above the comment box instaed of below it.
Thx
January 30th, 2008 at 11:54 pm
ah i found it
in the comment.php for my theme it calls
ID); ?>
January 31st, 2008 at 12:00 am
php do_action(’comment_form’, $post->ID);
January 31st, 2008 at 12:15 am
Chris,
That’s the one! If you want it above the comment box, you’ll have to manually edit the theme. There is no WordPress ‘hook’ that allows a plugin to place it there.
Thanks!
January 31st, 2008 at 9:58 am
Love your plugin!
Had a thought though. Instead of putting the image right in the comment, what about adding a link that would show the image in a lightbox? I have been trying to get it to work, but without success. The link would have to look like this below for it to work.
<a href=”URL to image” rel=”lightwindow”>Link Name</a>
Any thoughts as to how to get you script to put the above out.
You would also need the ms_lightwindow plugin for this to work.
Thanks for your thoughts
January 31st, 2008 at 12:00 pm
Paul,
That’s a very good idea! I’ve just recently become aware of lightbox and would love to use it in this plugin.
I will add it to my list of things to do and make it an option in the next release. I will work on it a bit this weekend and email you my results.
Thanks!
January 31st, 2008 at 12:46 pm
Here is a one of the lightbox’s out there.
http://www.stickmanlabs.com/lightwindow/
This site has awesome instructions as well as how-to’s
This lightbox can do much more than images. Can load just about anything you can think of, much better than most of them out there.
I look forward to your results. Thanks, Paul
February 2nd, 2008 at 12:34 am
Paul,
All that’s necessary to make lightbox (or other) work is the following:
Click here for the instructions!
Good luck and let me know if it works!
February 2nd, 2008 at 11:07 am
That did not seem to work. Although that might be some of the script that needs to be added. I think the following line needs to change as well.
document.getElementById(’comment’).value = document.getElementById(’comment’).value + ‘‘ + URL + ‘‘;
The script is adding the image to the comment box with the tag instead of using the link tag that it needs. I would imagine that the img + URL + img would need to look like the link populated in the comment box.
I could be way off but when I tried the new scripted, all I got was a fatal error.
By the way, I think we are neighbors…I live in Canton, MI.
February 2nd, 2008 at 11:29 am
Paul,
My mistake. I forgot to escape 2 characters in my code. This one will work (I tested to make sure!).
http://wordpress.pastebin.com/f47dc089b
This assumes you have lightbox or lightwindow already setup on your site. Change “lightbox” to whatever the image script wants. You don’t have to change anything else. The PHP code parses the tags and will return the link with the rel attribute.
Here it is in action: dscn0869_31.JPG
P.S. Hey! I was just in Canton, too. Did some shopping at IKEA.
February 2nd, 2008 at 3:39 pm
Worked like a charm. I had to change the “rel” to class to get it to work with lightwindow. Thanks for all your hard work. Looks great and works great.
Paul
February 8th, 2008 at 12:34 pm
Hi Trevor,
I just enabled this plugin on a Wordpress blog, and the link didn’t show below the comments block.
Is there something I can check on my blog to make sure that this is displayed?
February 8th, 2008 at 12:43 pm
I think it has something to do with my theme, as when I switch back to the default theme it works fine. What would I have to edit in my theme to have this displayed?
February 8th, 2008 at 12:43 pm
Antonio,
You can check to see if this piece of code exists in your comments.php file of your theme:
< ?php do_action('comment_form', $post->ID); ?>** Make sure there’s no space between that greater than sign and the question mark at the beginning.
If it doesn’t, just go ahead and add it wherever you want the link to appear.
February 8th, 2008 at 1:03 pm
Thanks Trevor!
I think the comment section is working, but I don’t think the actual code is being embedded into the head. Is there another function that should be called ti embed the JavaScript into the head?
February 8th, 2008 at 1:07 pm
Antonio,
There is no code to add to the head. I modified my own plugin to work with lightbox. That might be what you mean.
The downloadable version of this plugin will insert the image directly into the comment so it’s visible inline.
February 8th, 2008 at 2:01 pm
Well,
When I try to add an image, the link isn’t being embedded into the comment box. I’m not sure why
February 26th, 2008 at 3:47 pm
Antonio,
It is likely because of your theme. Try changing to the default theme to see if it works.
March 7th, 2008 at 9:02 am
I would love to see the ability to upload an images as well as just using a link
May 13th, 2008 at 9:04 am
Hi Trevor
Is your plugin still 97 Dollars???
Greets
June 1st, 2008 at 6:37 pm
hi there,
I have added your plugin and the following code but nothing seems to work once i enter the image URL..
ID); ?>
(without the space)
I have it on http://thepetbarn.ignitionmedia.info/pet-stories. Can you please assist as to what I have done wrong or need to change.
thanks very much
June 1st, 2008 at 6:44 pm
Futher to my comment above, I have my comments function on a page, not post. Will this effect it?
I changed my theme to the default but then there was no contact form on this page at all.??
please help!
June 2nd, 2008 at 11:52 am
Raffy,
Yes, the plugin is still available. I will be setting up a shopping cart shortly so that it can be easily purchased. Thanks.
June 2nd, 2008 at 11:58 am
Nicole,
Your in your website needs an “id=’comment’” in order for it to work. The fix is quite simple. Just open up your theme’s comments.php, find:
<textarea name=”comment” cols=”50%” rows=”8″>
and replace with:
<textarea name=”comment” id=”comment” cols=”50%” rows=”8″>
Good luck!
P.S. I really like your site!
June 11th, 2008 at 2:27 pm
Trevor - are there any reference sites showing where the paid for version is installed? Could be just the thing for a project I’m working on.
June 25th, 2008 at 2:00 am
Hi, maybe I’m stupid, but could someone please advise how I “install” the plugin? My site is hosted at Wordpress, so I don’t have any installation files.
Thanks
Sean
June 26th, 2008 at 11:17 am
Sean, The plugin is only for self-hosted versions of WordPress. You can’t use it on WordPress.com.
-Trevor