I decided I wanted to allow DirtMind site members to be able to add captions to images easily so I set about thinking how to add an Image Captioner to the free DirtMind image hosting service. I intially talked to the developer of a well known online image captioner about getting his code to work as part of my site. Unfortunately though the backend technologies of his site and DirtMind didn’t mesh so I set about writing my own.

In the end this has had a lot of advantages as the Image captioner is far more specific to my design Server-side it’s pretty simple as I already had some image processing going on to watermark images with my site logo. Rather than make a stand alone image captioner I decided to integrate the functionality throughout the image gallery – that means all uploaded images are captionable. If you’re the owner of an image you can overwrite it with a captioned version, otherwise you can just save it as a new image (of course owners can do this too).

Of course some people will want a stand alone captioner, or at least a landing page so I created one for these people at www.dirtmind.com/captioner.php but this is really just a single file upload box that goes to the normal gallery pages

Play with it

As with everything at DirtMind it’s free and has no ads, if you want to try it out just look at any image on DirtMind! Here’s an example to play with (just click the pic).

You need to have a registered DM account to save your pic, or upload new ones, but you can play about with the captions without registering!

Technically the most challenging thing about doing this was the client side javascript. It seems that if you write something that works in FireFox then it pretty much works in Safari and Chrome. IE however has it’s own plans, and needs entirely different code. I spent a lot of time getting it to work in each platform. If you use another browser I’d appreciate you giving it a test run!