Yes You Can Put Images In Your Comments!
There have been at least a few times when I wanted to add an image to a comment in my WordPress blog but never took the time to investigate it thoroughly. I’m pretty sure I performed a cursory search, saw “it can’t be done!” and went back to whatever I was doing. It just wasn’t pressing enough for me to dig around … until today.
Squeaky Wheel Gets The Grease
This issue faced by two bloggers I know, both of whom wanted to specifically insert an illustrative image in a comment they were writing. I first encountered a comment by wordsmith extraordinaire and creator of the popular community networking software, Blogmogrifier, Mitchell Allen. I wished I could help him. Less than 24 hours later, I thought I heard the very same desire from the exceptionally talented video tutorial creator, Ileane Smith of BasicBlogTips. (Turns out, Ileane already knew how to add images to comments, but was just having an issue with resizing the graphic she wanted to add.)
Self-interest is a beautiful concept.
By that, I mean, I like to have the answers to computer-related, web-related, and desktop publishing-related questions! Dog-gone it … Since when don’t I know the answer to something as seemingly simple as adding an image to a comment? I marched off and came back with the answer, because the next time a blogger, a friend, a client asks me (not that they asked me!) how to add an image to a comment, I will know! (Or, at least I can refer both of us back to this post!)
Another Plugin? No Thank You!
There’s a plugin for that!
The first answers were, “It can’t be done!” The next answer, after someone determined it could be done, was: “Hey, there’s a plugin for that!” Not this time, buddy. See, I just spent major time, and burnt up a lot of brain cells trying to figure out why my websites kept throwing those blasted “500 Internal Server Error”s. I just tossed out errant plugins, memory hog plugins, useless, tasteless, and hanging-around plugins.
Another plugin was not the answer for me. But if you want to go that route, this fellow put together one that will put your images in your comments. I haven’t tested it. I haven’t used it. I haven’t seen it. I haven’t downloaded it … Get the picture? Use it at your own risk. It’s called Comment Image Embedder but the name in the WordPress plugin repository is Comment-Images. The author, Trevor Fitzgerald, says it is “a very simple plugin that, once installed, lets your visitors add an image to their comments.”1 If you don’t plan to allow your visitors to add images, this probably isn’t for you.
Still here? Here we go!
How To Add Images To Your Comments in WordPress
These instructions apply ONLY if you are hosting the WordPress blogging software on your own webhosting space.
I’m not sure whether or not you can do this if your blog is hosted on WordPress.com. (I’ve got some there, too, but I didn’t take time to figure that out yet.) Likewise, I can’t say this works for Blogger (Blogspot) blogs. I’ll leave this for another day, or if you get the chance to try it, let us all know.
There Are 3 Steps
You probably already know how to get your images from your computer into the WordPress Media Library, but just in case …
In Brief … Save image to desktop or folder, in your WordPress admin, go to MEDIA, then add the image
Using your Admin Dashboard
- MEDIA > ADD NEW
- Click the SELECT FILES button
- Upload the image
Be sure to add a title, some alternate text, and a description to your image. Currently, this is one of the foremost recommended strategies for images by SEO and usability experts alike. Larissa Thomason of NetMechanics2 sheds a little more light on the matter:
Consider the benefits of good ALT and TITLE text:
- Enhance the browsing experience of visitors with disabilities.
- Increase your page’s keyword density score and relevancy for your targeted keywords. (Calculate your page’s keyword density . . . and find out if you’ve used your keywords too little – or too often.)
- Provide valuable information to all your visitors with descriptive link titles and descriptive text about other page elements.
Find the image you want to include in your comment.
- MEDIA > LIBRARY
- Locate the image you just uploaded
- Copy the FILE URL
Now you’re ready to insert the image in your comment.
From within the WordPress Admin Dashboard . . .
- Write your comment (or if you want to add an image to a comment that’s already been written, locate the comment)
- Move to the place in the comment where you want the image to appear
- Paste the FILE URL you just copied into the appropriate place (see below for the exact code you’ll need)
Save your comment. Of course, you should view the comment within the post to make sure everything went as planned.
The Image Code
Code is Poetry. – WordPress Developers
Code is not a nasty word. It is just a wee bit of text. (Well, okay, the WordPress code itself is a mountain of text. But we’re not creating a mountain!)
Highlight and copy the pieces of code below. Then use them when you need them.
Here’s how the code looks.
If you understand it, you can put it in by hand without even using the Media Library. An even better benefit is you can use images from anywhere as long as you know the URL or image address. Really, this is no different than adding an image in a post!
In its simplest form, this is the image code:
<img src="URL TO THE FILE">
If you want to do it right (for better accessibility and for SEO benefits), do it like this . . .
<img src="URL TO THE FILE" title="" alt="">
Just put whatever text you want between the quotes for both TITLE and ALT.
Linking To A Post From The Image
The simplest form of a hyperlinked image is this:
<a href="URL-TO-POST"><img src="URL TO THE FILE"></a>
You have two pieces of information to change. You’ve got the hang of URL TO THE FILE, which is the entire link to the image. Go find the post you want the image to link to. Copy the address from the browser bar. Drop that address in place of URL-TO-POST. All done!
Caveats aka Things To Watch Out For
Image Size – If you look at my comment section, you’ll see it spans about two-thirds of the page. I try to keep the image around 450px.
Don’t forget to describe your image.
Trying to hyperlink? First do the img src part. Then wrap the image in the hyperlink part.
Tools For Quick Image Manipulation
Snag-It Screen Capture & Image Editor
Free 30-day trial — http://www.techsmith.com/screen-capture.asp
I use this every day. I mean it. Most of the screenshots in this document were captured with SnagIt, then modified in some way. – Vernessa
FastStone Image Viewer
Free — http://www.faststone.org
An image browser, converter and editor that supports all major graphic formats …. features such as image viewing, management … resizing, cropping, color adjustments ….
Snipping Tool in Windows Vista / Windows 7
With Windows Vista and later, Microsoft has included a utility called the Snipping Tool to make capturing screen shots easier.
- 3 Ways to Capture / Take A Screenshot On A Linux Computer
- 5 of the Best Free Linux Screen Capture Tools http://www.linuxlinks.com/article/20100823043917405/ScreenCaptureTools.html
The Proof Is In The Pudding (aka The Image Is In The Comment)
The first comment below is a test of adding an image to a WordPress comment. It works!
Your Turn . . .
Please let me know whether (or not) the steps described in this tutorial work for you. Come on back by and let me know. If you’ve found another way of getting the same thing done, let us know about that, too.
Webmasters, Blog Owners, Ezine Editors: You Can Use My Articles!
Video Solutions – 4 Services Solve 5 Common Problems With Adding Video to Any Type of Website Find more at EzineArticles.com.
- Allow your visitors to add images to their comments by using the Comment Embedder plugin for WordPress by Trevor Fitzgerald. [↩ go back]
- Larissa Thomason of NetMechanics discusses image attributes in HTML Tip: Using ALT And TITLE Attributes [↩ go back]
- WordPress.com forum post, Images With Comments, July 19, 2010. [↩ go back]
- WordPress.com forum post, How to insert a picture directly in a comment, April 6, 2009. [↩ go back]