Using jQuery to auto add image captions

I've been working on site recently where were porting a lot of content. The client wanted to be able to have captions for the images we were migrating. The task of going through each page and and adding captions did not fill my collegue (Andy Beer) and I with enthusiasm so instead we decided to use jQuery to extract the alt text from each image and use that as the caption.

This is what I came up with:

<script type="text/javascript">
jQuery(function($){
  $('#content img').each(function(index) {
    $this = $(this).wrap('<div class="img-caption" />');
    $('<p class="caption">' + $this.attr("alt") + '</p>').insertAfter($this);
  });
});
</script>

jQuery really does make tasks like this incredible easy!

• Posted in:
• jQuery

10 comments

1. Hadn't come across wrap() before, John. Useful looking method.
   
   Captions can be a little tricky to deal with though. What's appropriate as an "alt" description might not always make a good caption.
   
   If clients want to add captions then it may be best to give them a separate way of doing that and then put the text in the "title" attribute. It can then be extracted in the same way.
   
   There's also debate about the best way of marking up captions semantically. I was surprised to see Blogger using tables, but you do then have a proper "caption" element, and its placement is apparently good for screen readers.
   
   I'm not sure what the current best approach is.
   
   Comment by Julian Halliwell – June 29, 2011
2. @Julian, as we were porting content then this was the way forward for us, but, I'd agree that normally the title attribute would be better suited. HTML5 has a figcaption tag which is probably better than using a table with a caption from an accessibility point of view as an image is n't tabular data. Although I do use captions on tables generally speaking.
   
   Comment by John Whish – June 29, 2011
3. How would I change this line to include a style tag containing the image's width attribute data so the div is only as wide as the image??
   
   $this = $(this).wrap('<div class="img-caption" />');
   
   Thank you, Tom
   
   Comment by Tom – March 08, 2012
4. Figured it out.
   $this = $(this).wrap('<div class="img-caption" style="width:' + $(this).attr("width") + 'px; float:left; " />');
   Plus getting the div styled to have a border and getting the caption per se properly positioned beneath the image, took some time to figure out this had to be done with a margin-bottom on the image.
   Thank you, Tom
   
   Comment by Tom – March 08, 2012
5. Hi Tom,
   
   Does this do what you want?
   
   jQuery(function($){
   $('img').load(function(){
   $wrapper = $('<div class="img-caption" />').css('width',this.width);
   $(this).wrap($wrapper).after('<p class="caption">' + $(this).attr("alt") + '</p>');
   });
   });
   
   Comment by John Whish – March 08, 2012
6. Thank you, I will try that...
   I think the line I have works with all your code to border and caption multiple images on one page...and I must ensure this does not conflict with slideshow code on the same page...
   I will update later...
   Thank you, Tom
   
   Comment by Tom – March 08, 2012
7. final code for now:
   jQuery(function($){
   $('#content img').each(function(index) {
   //$this = $(this).wrap('<div class="img-caption" />');
   $this = $(this).wrap('<div class="img-caption" style="width:' + $(this).attr("width") + 'px; float:left; " />');
   $('<p class="caption">' + $this.attr("alt") + '</p>').insertAfter($this);
   });
   });
   
   styles used:
   div.img-caption {
   margin: 0 1em 1em 0em; /* 3/7/12 zero margin left and right sides */
   border: #b5c19f 1px solid;
   padding: 7px 7px 0px 7px;
   }
   div.img-caption img {
   margin: 0 0 10px 0;
   padding:0;
   }
   div.img-caption p {
   font-size: .75em;
   line-height:1.6em;
   }
   Not sure the line height works, luckily the above also styles our slideshows too.
   Content must have an id of content for this to work or #content could be removed too but this prevents header or sidebar images from getting captions.
   
   Only remaining question: How to have an image *not* be captioned if so desired??
   
   Thank you, Tom
   
   Comment by Tom – March 08, 2012
8. Hi Tom, I think you want to use the not method ( api.jquery.com/not/ ) to filter out images which have a specific class. Alternatively I guess you could also do it by image size.
   
   Comment by John Whish – March 10, 2012
9. I get the general idea, it will take a lot of experimentation to figure out where to put the 'not' part...Thank you, Tom
   
   Comment by Tom – March 12, 2012
10. Very helpful. Thanks!
    
    I added the following code to make it hide and show:
    $(this).parent().hover(function(){ $(this).find('.Caption').stop(true,true).slideDown(); },function(){ $(this).find('.Caption').hide(); }
    
    www.coderrific.com/forum/detail/how_to_automatically_add_captions_to_images_using_jquery
    
    Comment by Michael – April 13, 2012