Editing WordPress QuickTags to automatically create captioned images

Filler Bunny: He takes up space
Filler Bunny

One of the best ways to add life to your blog posts is to include images with the text–your reader’s eye is naturally drawn to the large visual well before the text itself, and the addition of a picture can bring an element or realism to your post that would normally be missed. Many templates available on the web, however, fail to include a simple way to add captions to your images, limiting what you can do with them. For example, anyone posting a picture of, say, two dogs would be hard-pressed to indicate which was Rover and which Fido without the aid of a caption. The easiest solution is to place the image in a table with a caption, of course, but this adds several ungainly lines of code which you must type in by hand in order to add a single captioned image. Even copying and pasting, this method of posting captioned images is a serious pain at best.

Thanks to WordPressQuickTags (the row of buttons directly above the post content itself on the Write page), however, it’s relatively simple to edit the ‘img’ button to create custom captioned images.

First, replace the function edInsertImage in /wp-includes/js/quicktags.js with the following javascript:

function edInsertImage(myField) {
var myValue = prompt(‘Enter the URL of the image’, ‘http://’);
if (myValue) {
myValue = ‘<img src="’
+ myValue
+ ‘" alt="’ + prompt(‘Enter a description of the image’, ”)
+ ‘" />’;
myValue = ‘<table class="alignright" width="’
+ prompt(‘Enter the image width’, ‘250’)
+ ‘" border="’
+ prompt(‘Border size:’, ‘0’)
+ ‘" cellspacing="0" cellpadding="0">’
+ ‘<caption align="bottom"><b>’
+ prompt(‘Caption:’, ”)
+ ‘</b></caption><tr><td>’
+ myValue
+ ‘</tr></td></table>’;
edInsertContent(myField, myValue);
}
}

Now, at this point, once you’ve replaced your current quicktags.js, the ‘img’ button on the write page may or may not do what you want it to do. Chances are that you’ll have to add to your CSS as well before you can reap the benefits of the modified ‘img’ button, though. If so, place the following in your template’s CSS sheet:

table.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

table.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

That should do it. Now whenever you go to add an image with the quicktags img button, it will prompt you for all the appropriate parameters to create a nicely captioned image like the one above. Should you wish, you can add other elements to the javascript, such as the ability to choose the color of the photo’s border.

UPDATE: Make sure you refresh the ‘Write Post’ page of WordPress after you modifiy your quicktags.js file. Otherwise, the cached (unmodified) version will continue to be used.

9 comments

  1. Vasken says:

    I can't see why it wouldn't, since whatever's in the code snippet that the quicktag adds should go into wordpress in the same way that the previous quicktag did (and I know the img quicktag's html disappears into the WYSIWYG properly). Let me know if it doesn't…it probably means that wordpress is automatically 'correcting' 'incorrect' HTML.

  2. Vasken says:

    Maybe the function's been renamed? I'll check it out and post back when I have an answer. In the meantime, make sure you're editing the right quicktags.js–there's a couple of them in WP, I think.

  3. Vasken says:

    Okey…after upgrading the whole blog to 2.0.4, I discovered that my quicktags.js was STILL including my modified 'img' button, even though the source .js was now the default one shipped with the release of WP. That's when I realized that you'll need to refresh the write page, since chances are good the cached version of the quicktags.js file is getting loaded, and that one of course doesn't have all of the nice changes you've made in it. WP tends to cache stuff indefinitely, so make sure you add this step in and your modified quicktags should work great in 2.0.4 (they're working fine in mine now).

  4. Ricky says:

    My quicktags menu disappeared when I started editing it. Any help would be appreciated. I am using Firefox. The weird part is I have replaced with all original files and it is still gone. If you could email me, I would appreciate it.

  5. Vasken says:

    Hmm, well if you've definitely got the original files back in there, I would suggest the same thing that worked for Chris above: clear the cache. If that doesn't work, it may be your FTP client isn't really replacing the file, or something like that…in which case try deleting the quicktags.js file that's up on your server now, and then copying the original one in there clean.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.