Image Caption

Lab Project

Wrestling with image and text positioning is no fun. Let Image Caption, the third tool from the Arc90 lab, make all of the hard work turn into cutting and pasting. All it takes is a script and some style to make your images nice and labeled.


What is this?

If The New York Times has captions on their images, why shouldn’t everyone be able to have them? With the help of Image Caption, adding text to accompany regular old <img> tags couldn’t be easier. Give your image a “title” — how appropriate! — and a class, and in less than a minute you’ll have beautiful looking captions for your images.

How Do I Use It?

Download The Code

Click on the icon below to download the source code for Image Caption:

Download

The file, imgcaption.zip, contains the script and an example page. Upload the script to your site and you’re ready to roll.

Link to the Javascript and Add Style

Add a link to the javascript in the page(s) you’d like Image Caption implemented. Remember to adjust the path to properly point to the location of the file on your server. Then, you need to add a line of CSS code.

You can copy this entire block and paste it into your <head> section:


.arc90_imgcaption { text-align: center; border: 1px solid #DDD; padding: 1em; margin: 1em 0; width: 9em; } .arc90_imgcaptionTXT { font-size: .8em; color: #666; text-align: left; } .floatl { float: left; margin-right: 1em; } .floatr { float: right; margin-left: 1em; }
Give Your Image a Title and a Class

Adding a caption to an image is as simple as specifying a title and a class. Write your image’s caption in its title attribute and then put “imgcaption” in its class attribute. That’s all there is to it.

<p><img src="myphoto.jpg" title="This is a cool photo I took." class="imgcaption" alt="My Photo" />And here's some text about the photo in the surrounding paragraph...</p>
<p>The text in the paragraphs following the image will automatically wrap around it and its caption, so no more layout headaches when you have to change captions!</p>
<p>...
Need to Switch Sides?

If you add the “floatr” class to your image, it will float on the right side of your text instead of the left.

<p><img src="myphoto.jpg" title="This is a cool photo I took." class="imgcaption floatr" alt="My Photo" />This text will be on the LEFT of the image...</p>
<p>The text in the paragraphs following the image will automatically wrap around it and its caption, so no more layout headaches when you have to change captions!</p>
<p>...
Text Formatting in Captions

Even though you’re working within a tag’s title attribute, you can still add HTML to your captions, provided you remember to use single quotes and escape your less than and greater than signs. For example:

  • This picture is from our trip to &lt;a href=’http://www.bahamas.com/’&gt;the Bahamas&lt;/a&gt;.
  • You may &lt;strong&gt;not&lt;/strong&gt; use this image without asking permission!

Examples

You can see Image Caption in action by clicking here.

Supported Browsers

Currently, the Image Caption script has been tested and confirmed on the following browsers:

  • Internet Explorer 6.0+
  • Mozilla Firefox 1.5+
  • Apple Safari 2.0
  • Opera Version 8.51

Licensing

This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.

Discuss Image Caption

You can send feedback on Image Caption at the arc90 blog.