Thursday, January 03, 2008

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 EDIT HTML/COMPOSE tabs 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="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/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="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/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:

Paris, Eiffel Tower, double decker busCAPTION

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="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/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="http://2.bp.blogspot.com/_jizoPL28qCY/R3mYAlYUScI/AAAAAAAABEY/5GbJ3Y_dkfA/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="http://1.bp.blogspot.com/_sEyw6txVACs/R3P7GgvBc-I/AAAAAAAAA_g/rqQu6zbZa7M/s1600-h/Arc+de+Triomphe+sbcar.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_sEyw6txVACs/R3P7GgvBc-I/AAAAAAAAA_g/rqQu6zbZa7M/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="http://4.bp.blogspot.com/_sEyw6txVACs/R1-OeIxatfI/AAAAAAAAA9Y/bqjOd6nFG3Q/s1600-h/C-G2+athens.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_sEyw6txVACs/R1-OeIxatfI/AAAAAAAAA9Y/bqjOd6nFG3Q/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="http://3.bp.blogspot.com/_sEyw6txVACs/RxMvhsUPT3I/AAAAAAAAA0g/e2UV_RNU9vU/s1600-h/muzium+negara+superciliousness.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_sEyw6txVACs/RxMvhsUPT3I/AAAAAAAAA0g/e2UV_RNU9vU/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.

Peter Chen's nice graphic signature

24 comments:

  1. Thank you for the tips. They were very interesting.

    ReplyDelete
  2. Sir , Just Love Ur Blog , I'm a regular reader of it and subscribed it on Google reader .

    Want a serious help from u . I recently updated my template but it showed slow loading time . I tweaked it a bit by removing HTML images and all and time improved but still it is quite slow . I knw the theme is heavy , but still if u can tweak it for me would be gr8 . Pls help me out ...

    I can mail u my XML , if u agree ... Waiting in anticipation .

    My Blog : http://techix.blogspot.com

    ReplyDelete
  3. Hi Shubham~neo~,

    My sympathies, I would like to help, but I have so many things going on all at the same time, I am afraid I cannot take up your offer. What I can do is to publish a post about a template which the creator claimed is fast loading and has some other interesting features. I had wanted to do it for a long time, but perhaps I will now put it at a higher priority, and since you say you are getting feed for this blog, I will publish that post on this blog. However, I have other tasks to finish first, so don't expect it to be tomorrow or something.

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks"
    slotted for conversion to custom domain

    ReplyDelete
  4. I understand sir , but if in near future u get some time kindly see to help me .. Keep up the gud work ... Happy New Year !!!

    ReplyDelete
  5. Hi Pete, Great informative blog. I need to ask you if you know a way around getting to let blogger show more than 10 post tiles at one time for under 'previous posts' in the sidebar. I looked at the html in the template but don't see a way (for dummies lik me) to increase the previous posts to say 25? Cheers Mate!

    ReplyDelete
  6. Hi waddafak,

    more than 10 posts? Haven't found a way to do yet. Don't know if it is possible and don't know if I have the time to try. Am behind on a lot of things. Very unhappy about the way my country is run plus what has been happening to those who try to do something about it. Got sucked (unwillingly but to me, no choice) into politics. See blog in signature line. Unfortunately now don't know where to concentrate my attention because I have to divide my time between many things. But will save this message plus your profile link plus URL of this post into the "to do" folder and update you if I have any good news.

    Concerned Malaysian Blog*Star
    Blog for Positive Changes
    (not "polical" but forced to become one because of circumstances)

    ReplyDelete
  7. Thank you very much for your tips ! It is very helpful for me esp when i started with no idea.

    from http://cashtactics.blogspot.com/

    ReplyDelete
  8. Hi Peter,

    thanks for dropping by and leaving a comment. I'm more than happy to give you link love since your tips so far have been a great help. Is it alright if I link to this blog?

    While I'm at it I was wondering if you could point me in the right direction for the following information: (that is if you've covered them already)

    1. I'd like to know how to include links in my comments (and are images a possibility?)

    2. When I create my own images (in Photoshop for example), they don't align left by default or respond to the <center> tag. I'm wondering if you've already broached that?

    3. Have you covered options on how to get several images to align (vertical or horizontal) and still get text to wrap when uploading from Blogger? From a host?

    I have plenty more questions but I'll stick to that for now. :-)

    ReplyDelete
  9. Peter, me again. I just saw your signature and your mention about how busy you are. Just so you know I‘m only wanting information on those topics that you already have covered (or similar that I can adapt) and also, there is no huge rush. I do understand what it's like to have too many things going on at the same time.

    ReplyDelete
  10. 1. I'd like to know how to include links in my comments (and are images a possibility?)

    Making active (clickable) links in posts and comments

    You may also be interested to read:

    Importance of anchor text in hyperlinks

    Improving link popularity and PageRank and encouraging visitors to comment by removing "nofollow" attribute for comments

    images in comments - impossible at the moment unless you can persuade Blogger to give us this feature:

    How to contact Blogger Support (hopefully how to make suggestions is included, if not, comment in the post and give me a good scolding)


    2. When I create my own images (in Photoshop for example), they don't align left by default or respond to the <center> tag. I'm wondering if you've already broached that?

    I am a cheapskate and have been managing fine for my needs with free (donations is welcomed but not necessary) and very good Irfanview photo editor. If my needs become more sophisticated, I might consider Photoshop.

    3. Have you covered options on how to get several images to align (vertical or horizontal) and still get text to wrap when uploading from Blogger? From a host?

    Uploading and manipulating images via Blogger

    Uploading and manipulating images Part 2

    There may be some posts about using external photo hosts like free Photobucket image host

    Making book cover images link to some website

    Make clickable images

    Uploading animated .gif images to Blogger

    Sign posts with graphic signature

    Nice signature using signature generator

    Captions for images in blog posts

    How to display images side by side

    Add series of photos in blog footer

    Put photo of authors in post footer

    Putting photos of authors' in post footer

    Centering text and how to put centered text below images

    Special fonts for graphic Header without removing blog text title

    How to put images in sidebar

    Those are posts connected with images and hopefully you find something that can help you.


    Peter Blog*Star
    Digital Candlelight Vigil

    ReplyDelete
  11. It's kind of cool when you add the 'title' to an image. When someone scrolls over the title pops up.

    And it's great for search engines if you have a photo blog ;)

    Thanks Peter, these are all great tips that I plan to put to use.

    ReplyDelete
  12. Great tip. You have emboldened me to try a third approach -- use a div tag, take the "Float" and "margin" parts of the style out of the img tag and into the div tag. Unfortunately, I cannot demonstrate the use of the "div" tag in a comment.
    <div style="FLOAT: left; MARGIN: 0px 10px 10px 0px">
    </ href="http://www.plantnames.unimelb.edu.au/Sorting/Pumpkins_Aust.jpg" <a><img style="WIDTH: 200px; CURSOR: hand" alt="" src="http://www.plantnames.unimelb.edu.au/Sorting/Pumpkins_Aust.jpg" border="0" /></a> <br>
    Red Hubbard Squash, center row
    </div>

    ReplyDelete
  13. Hi Peter,
    Just a quick note to let you know how much I appreciate your "Tips & Tricks." Simply detailed with a spot of humor:)

    So much so that once I learned how to add sites, I just had to link to you. Thank you very much...

    I was going to comment on your birthday page also but it looks like you had quite a bit of exercising to do and I didn't want to make you push your birthday years before their time. What a beautiful family!

    ReplyDelete
  14. Hi Louise,

    Thanks for your kind words plus consideration for me overexerting myself. Actually I am looking for excuse to exercise, but cheating a bit because I love blogging and Internet so much I find it hard to tear myself away. I try to find every excuse to exercise, shops, newspapers, restaurant for dinner, pasar malam (night market), pasar tani (farmers' market), bank, hypermarket, all within walking range. But I know I am not getting enough, not the real kind anyway that can keep me younger longer. Need actual exercise, but very hard.

    Peter Blog*Star
    Natural Remedies

    ReplyDelete
  15. See latest update at bottom of post (in red).

    Peter Blog*Star
    Blogger FAQ

    ReplyDelete
  16. Hi Family Nutritionist,

    Thanks for the useful informtion. Wish I have time to test it out. It must work as otherwise you would not post it. However, I am a retired scientist, which means we do not accept it unlies I myself test it out or there are sufficient bloggers whos have used it sucessully before we ourself accept it. I will copy what you have posted and will try for a free day to test it out.

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  17. Hi Peter,

    how can i upload the original photo with blogger uploading tools???? i encounter the photo i uploaded via blogger uploading tools become small???

    please help!!!!

    thanks in advance

    ReplyDelete
  18. Hi Shi Ting,

    Please refer to Why I am often slow in responding to comments and emails during this period.

    There are 3 options in uploading photos via Blogger - small, medium, big (from memory). Are you sure you didn't select small?

    Feedback highly appreciated.

    Peter Blog*Star
    Environmental blog: Enviroman Says
    (floods in England, polar ice and ice caps at moutain peaks melting, I think more severe and frequent hurricanes in US, rain when it is supposed to be a dry season in my country, someone from Queensland recently contacted me if I noticed the weather changing. I replied when I was young I had to sleep under the blanket, but now I sleep topless. If I remembered, he said it is freezing in tropical Queensland and now he has to sleep under a blanket. Please folks, take good care of our one and only Spaceship Earth which have no lifeboat. It may not affect us severely now, but it has every chance of severely affecting our future generations. Then they will have lots to be "thankful to us)

    ReplyDelete
  19. hi Peter,

    thanks for your replied. I m very sure i m select the large option while i m uploading the photo....

    i read other people blog, they can upload the picture with original size... why not me????

    ReplyDelete
  20. Hi Shi Ting,

    I never use the COMPOSE mode as it gives me less control over what I can do with my posts, but always use the EDIT HTML mode where I can get things like photos, active (clickable) links, etc, do exactly what I want them to do, plus a lot of things that can be done in the EDIT HTML mode cannot be done in the COMPOSE mode.

    I had been told by another blogger that if you upload a photo in the COMPOSE mode, and you move it by drag-drop, then the photo can become unclickable. True or not I hope to test one day, but you can help me by telling me if that was what caused your problem.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  21. Thanks for this. The tables work better than the CSS hacks, which I've never gotten to work. The "width=" in style is essential.

    ReplyDelete
  22. This was very helpful - thank you!

    ReplyDelete
  23. I have a better way. You may share it. I developed it myself through much effort. If you wish, you can leave me a message at my website.

    The best way to put captions is at this link:

    http://dl.dropbox.com/u/3123451/BloggerCaptions.rtf

    You can then erase my comment and use my tip to attract readership.

    ReplyDelete
  24. any iffect on adsense when we do this?

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics