Captions for images in blog posts

It is always useful for visitors to a blog with images (photos especially) to have a caption and here I am going to describe how I do it for images uploaded via the photo upload icon in the Blogger post editor. There are 2 ways, and I hope to add notes of the advantages and disadvantages of both. Note that all these must be done in the EDIT HTML mode in the Blogger post editor, not the COMPOSE (WYSIWYG) mode. Also, in this post, I will give scripts for you to study, and if you find it troublesome to do it on the post itself, you can highlight all the script in the scroll box, copy it, then paste it into a Notepad file to study at your leisure.

Also, each time you upload a photo, the script for the photo (in EDIT HTML mode) or the photo itself (in the COMPOSE mode) will be right at the top of the post, irrespective of where you place the mouse cursor. I prefer EDIT HTML mode rather than the COMPOSE as it gives me better control over how my post will display. Also, my habit is to leave the original script in its original place place at the top of the post, highlight it all, right-click, select "copy", scroll down the post editor window, paste it where I actually want the image. This means I will have 2 copies, the original at the top, and the copy at the spot where it will be eventually. This I feel is safer as if anything happened, you can still get the script from the original at the top, and only delete it when you have everything worked out fine.

For more details, refer to Uploading and manipulating images with Google Blogger (click BACK button to get back to this page).

Add caption direct into the Blogger script for the image>

This is the easiest method. When you upload an image via the photo upload icon in the Blogger post editor, this is how the script may look like:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFGSutStuCLwna1WR114sPnxvchE9ND-BleFCY0bRmj_dAecsK9855RcC2EDCAtwkLe-Kndh3U1eFh8LyoFutzssmbHCE90E5nVw7OFfAtqEJgmS9aWMQAMo2B1T31tFr5NdfBbb3HQ65/s1600-h/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFGSutStuCLwna1WR114sPnxvchE9ND-BleFCY0bRmj_dAecsK9855RcC2EDCAtwkLe-Kndh3U1eFh8LyoFutzssmbHCE90E5nVw7OFfAtqEJgmS9aWMQAMo2B1T31tFr5NdfBbb3HQ65/s400/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5150314784676399554" /></a>

This is what appear at the end of the script:

id="BLOGGER_PHOTO_ID_5150314784676399554" /></a>

Now what I am going to do is to cut out the beginning part of the above to make it shorter, then insert the text "CAPTION" into the script just before the last </a>:

399554" />CAPTION</a>

This CAPTION can be any test you want and will do a demonstration below:

CAPTION

Note that I have chosen to upload the photo above as "center" as I only use option like "left" when it is a small photo and I want the text in the paragraph to wrap around the text. Note that while the photo in centered, the caption, is not, and also CAPTION is a link to the larger image on the web containing nothing else but the photo. I suspect this can be overcome by choosing the "left" option when uploading the image, but anticipate problems, unless you do not have any text in the same paragraph as the image. I do not know as I have never done it before, and don't have any need to do it. Leave a comment if you have experience with this and share.

The above does not look nice, so to center the caption, all I need to do is to add the HTML tag <span style="text-align;"> at the beginning of the script and <span style="text-align:center;"> and </span> at the end.

Note also that the above is not my photo, but is the property of David who have kindly given permission to use his photo in a post in another blog: Paris, most popular tourist destination in the world, etc. Note that it is also polite to attribute the source of the photo you use when it is not yours, and normally I acknowledge it by adding a link to whatever website the photo owner wants it. This is done by adding a HTML hyperlink tag <a> and I will put the script I used to display the photo by David at Paris, most popular tourist destination in the world, etc. The script is inside the scroll box below, and it is your job to study it if you want to do something similar, and ask for help if you get into any difficulties.

<div style="text-align:center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFGSutStuCLwna1WR114sPnxvchE9ND-BleFCY0bRmj_dAecsK9855RcC2EDCAtwkLe-Kndh3U1eFh8LyoFutzssmbHCE90E5nVw7OFfAtqEJgmS9aWMQAMo2B1T31tFr5NdfBbb3HQ65/s1600-h/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFGSutStuCLwna1WR114sPnxvchE9ND-BleFCY0bRmj_dAecsK9855RcC2EDCAtwkLe-Kndh3U1eFh8LyoFutzssmbHCE90E5nVw7OFfAtqEJgmS9aWMQAMo2B1T31tFr5NdfBbb3HQ65/s400/Paris+Eiffel+Tower+double+decker+bus+bratan.jpg" border="0" alt="Paris, Eiffel Tower, double decker bus"id="BLOGGER_PHOTO_ID_5150314784676399554" />Photo of Eiffel Tower and double Decker bus
<a href="http://www.flickr.com/photos/bratan/809334835/" target="_blank">by David</a></a></div>

This is not obvious, but there are actually 2 links in the caption, one to the enlarged photo on the web (the one above), and one to the source of the photo (the one below). You can try clicking on them if you want and observe what happen. This is done by typing the text "Photo of Eiffel Tower and double Decker red bus", then pressing the ENTER key to force a line break, then continue with the HTML hyperlink tag to link to the source of the photo (<a href=".....).

I have earlier done it a very slightly different way as you can see in the photos in the post Malaysian students in Paris. Note that except for the first photo, all the captions in all the photos is a single line, not in 2 different lines like above. There are again 2 links in a single line in the caption, one is at the beginning and one at the end. It is not obvious, but since the photo owner, didn't object, I will just leave it as a demonstration. To make the 2 links in separate lines, you must make a line break by pressing the ENTER key when typing out the caption. You can study the script for the above example to better understand. Hopefully, this is very clear as to what can be done.

<div style="text-align:center;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZbHdq0Wp5AxsFFi0dy8VKtD7w1TMzJQWyc74naAsPefqYuOTooDBj3u3fnTrEOBFYpMDYgsQ6DQhlo3BuQWYrcDMs-ytRDwdEHX-bwLm1eNkuGPCEr4BoL0ZE2ksd8YjRaSiAp5WOn9_/s1600-h/Arc+de+Triomphe+sbcar.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRZbHdq0Wp5AxsFFi0dy8VKtD7w1TMzJQWyc74naAsPefqYuOTooDBj3u3fnTrEOBFYpMDYgsQ6DQhlo3BuQWYrcDMs-ytRDwdEHX-bwLm1eNkuGPCEr4BoL0ZE2ksd8YjRaSiAp5WOn9_/s400/Arc+de+Triomphe+sbcar.jpg" border="0" alt="Arc de Triomphe"id="BLOGGER_PHOTO_ID_5148734888299557858" />Arc de Triomphe by <a href="http://www.flickr.com/photos/stephencarlile/487336403/" target="_blank">Stephen Carlile</a></a></div>

Advantages and disadvantages of inserting stuff direct into image script to add caption

The advantage of this method is, it is relatively easy to implement as compared to what follows, which require a bit more of HTML. The disadvantage is that the caption will always be a link, and you cannot have plain text or add a title which is possible in the second method.

As to having the photo aligned to the left, I have never tried adding captions to such images, but anticipate problems, so don't want to try. But if you have done it before, and willing to share your experience, I hope you will leave a comment with a link to the post where you have done it.

Use HTML tags for table

Another way to add caption using the HTML table tag <table>. You can see an example of that in the post Malaysian married couple's honeymoon in Greece. In the first method, you cannot avoid captions as links. In this case, you can see the caption are plain text, not link. The way to do it is to upload your image via the photo upload icon in the Blogger post editor, select the "center" option, then upload. In the script for the image at the top of the post, add some descriptive text in the alt="" attribute in between the 2 quotation marks "" (highly recommended), highlight all the script, right-click, choose "copy" (or press ctrl+C), scroll down to where you want the image to be, right-click and choose "paste" (or press ctrl+V). This method will be a bit more complicated if you are not familiar with HTML, but let us press ahead and if you concentrate, you can do it and learn more HTML in the process. Note: it is important you do not press the ENTER key at any point while typing the HTML for the table or you will find large empty space above your photo. If you have difficulties in doing this, refer to Easy way to avoid large blank space above table when using the <table> HTML tag (click BACK button to get back to this page).

Type this at the beginning of the image script:

<table style="text-align:center;"><tr><td>

I will explain what all the gibberish is all about so you know what we are doing. <table is to tell the web browser we want to display a table. style="text-align:center;"> is to tell web browser we want things to be centered. <tr> is to indicate the beginning of a table row. <td> stand for table data. In this case, the table data is the script to display the image. Practically all HTML tags occurs in pairs, opening tags like those above, and closing tags. Now we need to add the closing tag at the end of the image script. At the end of the image script, type

</td></tr><tr><td>

</td> closes the table data tag, </tr> closes the table row tag, <tr> tells the web browser we are beginning a new table row and <td> tells the web browser we are starting a new table data, in this case, the caption. Just type the caption you want, then end it with
</td></tr></table>, the corresponding closing tags. For your better understanding, I will put the script to display one of the photos in the post Malaysian married couple's honeymoon in Greece below:

<table style="text-align:center;"><tr><td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBMs6okWT1Nd-K8CAKfWLiG9SvMtedNmL32mVT4KZcHOBr1Rcx0RDmM263qKrQWTQq3und79k6-7_aFHt9uzc1Xbl1b9Y09khyggKdE27jRmsJZYLGRjAmd3rlKSY-lr2jeHk2TmC2Wnc/s1600-h/C-G2+athens.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBMs6okWT1Nd-K8CAKfWLiG9SvMtedNmL32mVT4KZcHOBr1Rcx0RDmM263qKrQWTQq3und79k6-7_aFHt9uzc1Xbl1b9Y09khyggKdE27jRmsJZYLGRjAmd3rlKSY-lr2jeHk2TmC2Wnc/s400/C-G2+athens.jpg" border="0" alt="Athens, Greece"id="BLOGGER_PHOTO_ID_5142985947882370546" /></a></td></tr><tr><td>Athens: Photo courtesy of Blogger Employee</td></tr></table>

Instead of just plain text, you can also include link, for example, link to the source of the photo you took from, or to the website the photo owner wants to be linked to. For an example, have a look at Kuala Lumpur Terry Fox run. Look at the second photo in the post, the one of the National Museum of Malaysia. It has both a title and a caption, and within the caption, there is a link to the source of the photo (actually, by now, I have my own photo which I can use, but didn't at that time). Note that the photo was used with permission of the owner.

To have both title, photo, caption, you must have a 3 rows table. This is a long post, and I am a bit tired by now and have other things to do, so just going to put the script to display the photo of the National Museum of Malaysia below in a scroll box for you to examine, analyse and learn:

<table style="text-align:center;"><tr><td>Muzium Negara Malaysia (National Museum of Malaysia)</td></tr><tr><td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhkMCWSOmqV6aRRJXeH1FxEGu-7uBe9DRiEl-LWt2KdK9KsO5DUAEaXe15g3rr1QpxQK9c6RGZ1iigoERtBnCOEPhU2aDLPF1Pimlw_VOHv-EJwzrJC5vQl7AmUgIyv5x8_UD7uU16cXr/s1600-h/muzium+negara+superciliousness.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWhkMCWSOmqV6aRRJXeH1FxEGu-7uBe9DRiEl-LWt2KdK9KsO5DUAEaXe15g3rr1QpxQK9c6RGZ1iigoERtBnCOEPhU2aDLPF1Pimlw_VOHv-EJwzrJC5vQl7AmUgIyv5x8_UD7uU16cXr/s400/muzium+negara+superciliousness.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5121489457128623986" /></a></td></tr><tr><td>Photo by <a href="http://www.flickr.com/photos/superciliousness/125144914/" target="_blank">superciliousness</a> under Creative Commons license</td></tr></table>

Acknowledgement: I got the idea of using <table> from Chuck or Nitecrutz of The real Blogger status but am now putting it in hopefully easily digestible form. I am going to add some HTML you can just copy-paste and then just edit to get what you want:

(later, got to finish something first)

You can also add a border to the table if you want. Just add an extra attribute border="1" to the HTML tag for table. If you want a thicker border, just increase the number from more than 1, the bigger the number, the thicker the border. I did this for one post, and found out that it caused problems. The table with the photo extend into the right sidebar, and in Internet Explorer 6, the right sidebar was pushed to the bottom of the post. I can't remember if I corrected the problem or left it as it is, but if I find it later, I will post a link. In the meantime, I need to finish this post and move on to other things.

Advantages of using table to add title and caption to photo

Advantages of using table is you can add both title and caption, the the capti0n can be just plain text or if you wish, a combination of text and link. Advantage is, it is slightly more complicated if you are not familiar with HTML and involves more work.

Update 30 January 2008: I have started using a different method and waiting for time to publish instructions. If interested, bookmark blog or subscribe in the email subscription box in the left sidebar.