Tagged caption

The Bubblenator: Make people say stupid things

The following is a sponsored review of The Bubblenator, a website that allows you to put thought or speech bubbles on any picture on the web.

Javascript is required.

When you first arrive at The Bubblenator site, it’s quite obvious that it’s a gimmick to drive traffic to the site online-casinos.com–heck, even the URL is based off that site. However, if you can ignore the fact that it’s clearly a page designed to create advertising for the online casino website, the bubblenator feature itself is pretty cool. You can put a thought or speech bubble anywhere in a picture that has a URL, then you can resize the bubble and add whatever text you want. All in all, it’s a pretty nifty way to waste time on an otherwise slow day.

Once you’ve got your picture all formatted, you can export the HTML for copying and pasting into your website, blog, etc. The good news is it’s all free; the bad news is the image modification is done with a Flash app hosted from the online-casinos site, so if the site goes down, so will your image. Also, there’s an annoying bit of code at the end that (surprise!) leads you back to the online-casinos site. Despite these limitations, The Bubblenator is definitely an interesting and fun way to waste some time. Of course, as an ad for online casinos, part of the point is wasted on those of us in the United States, where it’s illegal to gamble for real money (and stupid to gamble for fake money). Until those laws are changed, however, you can still take advantage of the completely unrelated, yet undeniably fun, Bubblenator.

cat, dog, bubblenator, caption, cartoon

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.