Automatic Image Captions

Posted

Auto Image CaptioningThere are plenty of ways to dress up your pages, and adding captions to your images is a nice touch in some cases. There are plenty of ways to do this of course, the old method would be to hand-code a block within a block (like the following reference) but if your site is pretty large that could take a fair amount of time.

HTML (Block within a Block)

1
2
3
4
<div>
  <img src="path/to/image.jpg" alt="Description" title="Description" />
  <div>Copy to describe the image (aka. Description)</div>
</div>


Well, that looks like a lot of work, and the above will still only give us a basic text element underneath the photo. That works in a lot of cases but I’d like to give it a somewhat more polished feel if at all possible. So let’s jump into the markup and figure out how to get the results in the demo.

HTML

1
2
3
  <img src="http://freshma.de/fiddles/img/autocaption1.jpg" alt="Image 1" title="Runway Runaround" />
  <img src="http://freshma.de/fiddles/img/autocaption2.jpg" alt="Image 2" title="Ballroom like a Rockstar" />
  <img src="http://freshma.de/fiddles/img/autocaption3.jpg" alt="Image 3" title="The Eyes have It" />

Simple enough right, we could pretend that these are spattered around a page in different sections but for our purposes here we’ll just leave them as they are. So I know that I’d like to wrap these in a couple of divs like the top (Block within a Block) example but I’m going to give them classes so that they can be styled and worked a little better, so let’s start with this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
img {
    margin: 5px auto;
}
img:after {
    content: ".";
    visibility: hidden;
    clear: both;
}
.photo {
    position: relative;
    width: 360px;
    z-index: 1;
}
.caption {
    position: absolute;
    font: italic 30px/35px "Times New Roman";
    color: #fff;
    z-index: 2;
    text-shadow: #111 1px 1px 3px;
    bottom: 10px;
    text-align: right;
}

Okay great, but this still isn’t doing anything to our demo images so now we’ll need to manipulate the DOM a little and wrap our images in the divs and classes we’ve established. At that point you can tweak them up to display however you’d like.

JavaScript (jQuery)

1
2
3
4
5
6
7
8
9
10
11
$("img").each(function() {
    var obj = $(this);
    var d = obj.attr('title');
    var a = obj.attr('alt');
    var i = obj.attr('src');
    var w = obj.width();
    var h = obj.height();
    if (d) {
        obj.replaceWith('<div class="photo"><div class="caption" style="width: ' + (w - 10) + 'px;">' + d + '</div><img src="' + i + '" alt="' + a + '" /></div>');
    }
});

Feel free to fork and fiddle with the demo, I’d love to see what you come up with. A quick note, the above code can be updated to work on a specified class instead of an image, or target down even further (recommended).

If you liked the post, share it amongst your friends!

4 comments on “Automatic Image Captions”

  3. Pingback: 45 Highly Useful jQuery And JavaScript Tutorials

  4. Pingback: รวมลิ้งสอน jQuery และ JavaScript | ไอทีสนุกดอทคอม

Leave a Reply