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.
Want to see what it’s like? Check out a demo here.
This plugin is now available for purchase online. It costs $97 and will be sent to you electronically immediately after you purchase it.
Why isn’t it free? It is a highly customized solution. It took a long time to develop and you’re also paying for my time.
Now onto the free version:
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
Donate
Do you like this plugin? I spend a lot of time developing these. Please consider donating so I can continue to update this and others.
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!**
39 Comments
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?
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!
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
ah i found it
in the comment.php for my theme it calls
ID); ?>
php do_action(’comment_form’, $post->ID);
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!
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
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!
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
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!
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.
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.
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
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?
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?
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.
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?
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.
Well,
When I try to add an image, the link isn’t being embedded into the comment box. I’m not sure why
Antonio,
It is likely because of your theme. Try changing to the default theme to see if it works.
I would love to see the ability to upload an images as well as just using a link
Hi Trevor
Is your plugin still 97 Dollars???
Greets
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
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!
Raffy,
Yes, the plugin is still available. I will be setting up a shopping cart shortly so that it can be easily purchased. Thanks.
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!
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.
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
Sean, The plugin is only for self-hosted versions of WordPress. You can’t use it on WordPress.com.
-Trevor
hi there,anybody who knows how can i have(upload and download images)on my website.like visitors can share there photo and download some images from my site.www.nichportrait.com.need some help thnx
Well some like this way, Buy I think you should consider the another side of the toppic too. Thanks
test post please delete if you like
Looking at the previous post, looks like it imbeds the link to the imag, not the image.
Matt,
I changed it so that it only provides a link. It can be easily configured to show the actual image, too.
Trevor
I need image upload through image search
“I changed it so that it only provides a link. It can be easily configured to show the actual image, too.”
Hello, I’m trying to get this to work, I changed the line with this one:
$content = preg_replace(’/\?\*(.*?)(\[\/img)?\]/e’, ‘”” . basename…$1″) . ““‘, $content);
It is showing the actual picture and the lightbox effect works but there are also 2 hyperlinks, 1 above and 1 below the picture. I’m don’t understand php very well so could you please help me with this? Thanks
Roland,
I sent you an email hopefully answering your question.
I am interested in the concept…but would thought that you would provide a model/example of the “picture in the comment”. If you could do this and let me know, I may be one step closer to a purchase.
I think I answered my own question, I am going to give it a try with an image from Wikimedia. Here goes.Raspberries05.jpg
is there a way to limit the size of images posted in comments?
Write a Comment