Image with Caption

Note: This information assumes that you know how to insert images into a post and you know where the code for the image is located. If you do not know, seek that information elsewhere.

Extra Note: This post previously had the outer wrapper and caption in <span>s with display:block. I've changed to an outer <div> with the caption in a paragraph (<p>) — it's simpler.

Captioning images can be done a few ways, some pretty simple and some more difficult. The method I use is in the more complicated category, but it's not that difficult and yields much better control and appearance than simpler methods.

This technique and the examples are for images uploaded to Blogger using the old post editor, but the same thing can be adapted to images hosted elsewhere.

Standard Blogger image code.

This is for a "large", centered image: I have cut the actual address so it's shorter.

<a onblur="try {parent.deselectBloggerImage Gracefully();} catch(e) {}" href="http://LINKED_IMAGE /s1600-h /build4b-for-caption.gif"><img style="display:block; margin:0px auto 10px; text-align:center; cursor:pointer; cursor:hand;" src="http://DISPLAYED_IMAGE /s400 / build4b-for-caption.gif" border="0" alt="" id=" Blogger_Photo_Id_52" /></a>

Explanation:
<a onblur... href=> -- Link to large copy wrapper.

<img style= /> -- The displayed image code that is typical of code inserted by Blogger.

display:block; -- Makes image block element; allows centering using auto margins; and inserts line break before and after image.

margin:0px auto 10px; -- Space around image. 0px top margin; auto left/right margins, which centers image on line; 10px bottom margin.

text-align:center; -- Centers text, but is not needed for image.

cursor:pointer; cursor:hand; -- Cursor types.

src= -- Displayed image address.

border="0" -- No border unless there is a border in the style for images. A css entry, either in the style sheet or locally, will over ride this.

alt="" -- Text to display if image is missing.

id="" -- I doubt there is significance, but you can use the id as an anchor.

</a> -- Close the link wrapper.

The technique.

To caption, I add a <div> wrapper to the image/caption pair with a paragraph <p> to hold the caption text. It goes like this:

Note: I have broken and indented the lines, but when working in a blog this is one line.

<div style="Pair_Styles">
  <a href="Linked_Image">
    <img src="Displayed_Image" />
  </a>
     <p style="Caption_Styles">
      Caption text
     </p>
</div>

That is done so I can tie the two together with some formatting, yet separately format the text.

In most cases, it means moving some of the styling from the image code to Pair_Styles. The pair are block element, so display:block is not needed at the image, and, margins are moved so the spacing to the surrounding elements is relative to the pair and not the image. I'll note here that if the image is floating, the float is moved or added to the Pair_Styles, so the pair float together.

The other important thing is that Pair_Styles includes width:xxxpx equal to the image's total width so the caption is constrained to the width of the image. The total width is the image width + padding + borders. Many Blogger templates include padding:4px and border:1px solid color. An image uploaded "medium" is 320px wide. Total width would be 320px + 8px +2px.

Think about it this way: there is formatting for three elements involved, the image/caption pair provided by the outer <div>; the image formatting provided by the Blogger code (<a href=><img scr= /></a>) which may be modified; and, the added caption formatted by the inner <p>.

Here's an aside: when entering code, always enter the opener and closer, then fill-in the middle. When you type <div>, immediately enter </div>. If you do that the blog will never go ballistic, and you won't be searching for errors.

The caption in action.

When working with blue on blue, remember, the blue goes on the bottom.

The caption is centered on the picture, not the column. I add caption font style to distinguish it from the post text; it can be a different color, or any style that can be applied to text. With a slight adjustment, the text could be centered below the image, but aligned left, and the number of lines can be changed using caption margins. Always remember that things may look different in IE and Firefox, and I'm not sure if anyone has determined how IE7 or 8 works. How about the way I slipped in an animated .gif?

Here's the code for the image/caption pair, I've once again trimmed the addresses:
<div style="margin: 10px auto; width: 320px;"> <a onblur="try {parent. deselect Blogger Image​Gracefully();} catch(e) {}" href="./s1600-h /bob-320.gif"><img style="margin:0; padding:0; border:0; cursor:pointer; cursor:hand;" src=".../s400/bob-320.gif" border="0" alt="Blogger strikes again" title="Blue on Blue" id="Blogger_ Photo_ Id_52" /></a><p style="margin: 0px 55px; font:italic normal 10px/1.1em sans-serif; text-align: center; text-indent:0;">When working with blue on blue, remember, the blue goes on the bottom.</p></div>

Here's the break-down:

<div -- Open div wrapper. display:block can be removed from the <img src> code. If the pair are to be floated, it goes here.

margin:10px auto 10px;> -- 10px spacing to elements before and after; auto provides centering for the pair.

width:320px; -- Image total width. Image width + padding + border. In many templates that adds 10px to the image width.

<a onblur="...> -- Linked image code.

<img -- Start displayed image code.

margin:0; padding:0; border:0; -- I add and adjust this depending on if I want a image border.

cursor:pointer; cursor:hand; -- Cursors (not really needed.)

src="./s400/b...-- Image address.

border="0" -- Border attribute, ignored if style sets border.

alt="Blogger strikes again" -- Blogger provides the alt="", I fill it in; this displays if the image goes missing.

title="Blue on Blue" --- I add; provides tool tip on hover.

id="BLOG -- Blogger inserts id.

/></a> -- Close the image and link code.

<p style=" -- Start the caption paragraph.

margin:0 55px; -- Margin, from edges of Pair_Styles, for the caption. 0px above and below the caption. 55px left/right is adjusted for appearance. In this case it provides three lines.

font:italic normal 10px/1.1em sans-serif; -- Change font to distinguish from post text.

text-align: center; -- Centers the text between the 55px margins. This could be text-align:left as well and the the text would still be centered, but the second line would be aligned left; this is an appearance thing.

text-indent:0;"> -- Make sure paragraph indentation is off.

Caption text.

</p> -- Close the caption paragraph.

</div> -- Close the outer or pair div wrapper.

That was pretty easy: locks the image and caption together, and provides complete control over the caption. The approach I use is to create a text file with the formatting for a few scenarios. Since I construct posts in a text editor, I grab the scenario(s) I am going to use and put them in the text editor, add the image code, make adjustments. When the post is complete, I paste the whole thing to the post editor.

Here's my flow. This is the way I am writing this post.
– Compost is disabled in my blog. I never look at my work in Compose. Everything is done in Edit Html.
– Decide to write and start writing in text editor.
– Assemble, edit and size images, including putting name on and copyright note. I crop to the post subject and scale, so I rarely upload a larger than 1,200px wide image and they run ~125KB in size.
– Sign-in, create post with title.
– Upload images.
– Copy image code to text file and, Save as Draft.
– In text editor, arrange images and modify code.
– Merge text and start markup.
– Save file as something.html
– The file is viewable in browser, although not blog-formatted.
– When almost done, transfer the post to my local template, which provides fully blog-formatted post.
– When post is complete, edit the saved post and paste the full post into Edit Html window.
– Publish, view, adjust.

End of basic prodedure.
Time for floats and borders.

The procedure is the same as above, but now floats and borders are demonstrated. These show the advantage that using the outer and captions wrappers offer.

When working with blue on blue, remember, the blue goes on the bottom.

This is a left floating image/​caption pair with a centered caption, although the text is left aligned within the centering.

The float was done by uploading the image as left aligned and then moving float:left from the <img src> code to the outer Pair_Styles div. Again, the image total width was included in the outer div, so the text is positioned within the width of the image. In the caption span, in addition to text-align:left, I put some padding and a dashed border for the paragraph.

Just a note about floating images. The order of the text and image can be critical to appearance. Above, the image with the caption, is first, followed by the text alongside the image. The next paragraph would also try to squeeze alongside, but I stop the float with <div style="clear:both;"></div> before the paragraph. That's how you control the flow of elements when you are including floats. In some cases, it might be necessary to insert a 'clear'; then a floating image; then some text; then another 'clear'.

Here's the code for the image/caption pair:
<div style="float:left; width:320px; margin:5px 10px 5px 0px;"><a onblur="try {parent.deselect BloggerImage Gracefully();} catch(e) {}" href="./s1600-h /bob-320.gif" <img style="margin:0; padding:0; cursor:pointer; cursor:hand;" src="./s400/bob-320.gif" border="0" alt="Blogger strikes again" title="Blue on Blue" id="Blogger_Photo_Id_ 5211916430247943730" /> </a><p style="margin:0 25px; font-style: italic; text-align: center; line-height:1.1em; text-align: left; line-height: 1.1em; padding: 2px; border: 1px dashed teal;">When working with blue on blue, remember, the blue goes on the bottom.</p></div>

Here's what I changed from the part one example:

<div style="float:left; -- Start the outer wrapper and make the pair float left.

And, in the inner caption paragraph:

padding:2px 5px; -- A little space for the caption border.

border: 1px dashed teal; -- Caption border.

When working with blue on blue, remember, the blue goes on the bottom.

This is the same image as the first, but I changes from float:left to float:right. In addition, I re-ordered the margins in the outer div to put the pair on the right margin and put space between the image and text.

I also added 3px of padding, and a border around the pair to the outer div.That means I changed the outer div width from 320px to 326px. When putting a border around both, the <img src> must be modified, by adding display:block; and margin:0 auto; to provide centering within the outer div.

When working with blue on blue, remember, the blue goes on the bottom.

Same, but centered by changing float:right to display:block and changing the right/left margins to auto. I also changed the caption to text-align:left, with a little more margin, and added some padding and a border to the caption paragraph.

I lead the image with <div style="clear:both"></div> so it started clear to both margins. When floating, you should also clear, sometimes before and after the float.

Side-byside with captions

The requirement is that the total width of the two images be less than the column width — not always easy with Blogger unless you use Picasawer thumbnails (144px). My images are 200px wide and the column is 500px wide.

Blue on the left.

Blue on the right.

The general technique is the same as above. The column is, of course, wide enough to support this configuration.

Here's the code for the side-by-side floats. Notice I start and finish with clearing divs to control how the images are related to text before and after the pairs.
<div style="clear: both;"></div>
<div style="margin: 10px 10px 5px 0px; float: left; width: 200px;"><a onblur="try {parent. deselectBlogger ImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/ _TUd2gQn_l3o/SFSjM0tD5RI/ AAAAAAAAAYc /lTjwtW72KMY /s1600-h/bob-200.gif"> <img style="margin:0; padding:0; cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com /_TUd2gQn_l3o/SFSjM0tD5RI /AAAAAAAAAYc /lTjwtW72KMY /s400/bob-200.gif" border="0" alt="Blogger strikes again" title="Little Blue" id="BLOGGER_PHOTO_ID_55" /></a><p style="border: 1px dashed teal; margin: 0pt 25px; padding: 2px; font:italic normal 10px/1.1em sans-serif; text-align: center; text-indent:0;">Blue on the left.</p></div> <div style="border: 1px solid teal; margin: 10px 0px 5px 10px; padding: 3px; float: right; width: 200px;"><a onblur="try {parent. deselectBloggerImage Gracefully();} catch(e) {}" href="http://1.bp.blogspot.com /_TUd2gQn_l3o/SFSjM0tD5RI /AAAAAAAAAYc/lTjwtW72KMY /s1600-h/bob-200.gif"> <img style="display:block;margin:0 auto; padding:0; cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com /_TUd2gQn_l3o/SFSjM0tD5RI /AAAAAAAAAYc/lTjwtW72KMY /s400/bob-200.gif" border="0" alt="Blogger strikes again" title="Little Blue" id="BLOGGER_PHOTO_ID_56" /></a><p style="margin: 0pt 25px; display: block; font:italic normal 10px/1.1em sans-serif; text-align: center;text-indent:0;">Blue on the right.</p></div>
<div style="clear: both;"></div>

Next up a floating block of text in a post.

If you have any questions, leave a comment.