Friday, November 10, 2006

How to add a caption to photos uploaded via Blogger classic post editor


Today, I took a closer look at the img tag created by uploading a photo via the upload photo icon in the Blogger classic post template and decided to do a little testing. What I discovered, as expected, I can create a clickable caption for the photo. All you have to do is to add the caption just before the </a> tag in the HTML created. If you want it centered, then just surround the text (caption) with the <center> and </center> tags. To see it done, surf over to this post Testing img tag created via the Blogger classic photo upload button in the post editor (close new window to get back to this page).

Update: <center> and </center> but had been deprecated and not encouraged. Better to use <span style="text-align:center;> and </span>

Alternatively, try <div style="text-align:center;> and </div>

Further note: In some browsers, preview will not show the tip is working. Publish and check. If <span> don't work, then try <div style="text-align:center;> and </div>

Feedback highly welcomed for this. Please leave your comments


Update 2 July 2007: Regarding caption that appear in the center at the bottom of the photo, you can only do it effectively if you chose "Center" for your upload. Also <center> has been deprecated, and I don't know how long it will be supported by browsers. An alternative is to surround whatever you want centered with <div style="text-align:center;"> and </div">.

For example, to put a caption under this photo uploaded via the photo upload icon (in the EDIT HTML mode), the script is placed in the scroll box for you to examine for greater understanding:

problem signing into Blogger with Opera browser
Problem signing into Blogger with Opera Browser


Now I will put the HTML script used to display the above image with the caption in the scroll box below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://bp3.blogger.com/_jizoPL28qCY/RtMHnKGWbRI/AAAAAAAAAmc/TSEtbBzCIZM/s1600-h/Opera+-+problem+signing+into+Blogger.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bp3.blogger.com/_jizoPL28qCY/RtMHnKGWbRI/AAAAAAAAAmc/TSEtbBzCIZM/s400/Opera+-+problem+signing+into+Blogger.jpg" border="0" alt="problem signing into Blogger with Opera browser"id="BLOGGER_PHOTO_ID_5103431172048186642" /><div style="text-align:center;">Problem signing into Blogger with Opera Browser</div></a>

22 comments:

  1. Thank you Peter for the information!!

    ReplyDelete
  2. Hi Chris,

    Thanks for taking time and trouble to express you appreciation. Actually there are lots more I want to add including other methods and possible problems. Maybe you should bookmark the blog or subscribe to the feed. The subscription by email form is at the left sidebar, towards he bottom of the blog.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  3. Hi Peter
    so that trick only seems to work if the photo is at the top of the post. What if you want a caption with the photo aligned to the left or right? Any ideas? Thanks!

    ReplyDelete
  4. Hi Ben,

    There are many ways to add a caption and I have already made another post Captions and titles for images in blog posts and hope to add one more. With the method described here, I would know how to align the caption to the left unless I test uploading images to float left, but cannot predict the result yet. Perhaps I may test it after this. Your comment has also reminded me I need to update this post.

    Now hope you don't mind me taking turn to ask you something:

    1. How did you get this post?

    2. Also, like to let you know I supported my 2 sons through college on my pension supplemented by income from blogging. If not for blogs and Internet, I would be in financial difficulties. I hope to help other bloggers who need to generate income do the same. I and an Australian relative is trying to set up a website to help bloggers earn some income from their blogs. I am more comfortable now but still hope to start something that can help other bloggers have the same opportunity as I had plus leave behind an online business I hope my sons will take over. I hope to interest you to join this temporary Yahoo group Yahoo group - Blogger Dough

    3. The above Yahoo group is preferred as it offers more flexibility in keeping members updated, but if you don't have a Yahoo account and don't want to create a Yahoo account, an alternative would be the Google group: Google group - Blogger Dough. You are encouraged to subscribe by email as if members joins Google groups where members have chosen "no email", it is much harder to keep members updated such as when there is a task available or when we have a new advertiser looking for bloggers to publish a post.

    At the moment, we only have 1 advertiser which need blogs that have PageRank 3 and above, and if you want an easy way to find the PageRank of your blog or blogs or any other websites, refer to How to easily find the PageRank of your blog or blogs or any other websites

    Even if your blog do not have the required PageRank, I would still encourage to join as our website is not even ready yet, so just having 1 advertiser is already very encouraging. In future, we will have advertisers with different requirements and by joining, you will be kept updated on developments. You may also follow developments at Suppliment your income by blogging

    Bookmark that blog or wait till I put a "subscribe by email" box in the blog, but hope you will first join the Yahoo group or less preferred, the Google group.

    Peter Blog*Star
    Blogger for Dummies

    ReplyDelete
  5. Peter
    ni hao! Ni de putonghua bu cuo, ke shi ni de pinyin bu tai hao. :) Xiexie ni de comments, he ni de jian yi. Hen you yi si!
    I found your post through the Blogger Help button, then I searched "captions" in the Forums and a link to your blog popped up in one of the posts there.
    Thanks again---

    ReplyDelete
  6. Hi, Peter! I got to your blog through google (guess I put in the right key words).

    Thanks a lot for this post! You put in easy to understand directions because I was able to put a caption in my blog immediately.

    Please sign me up for your blogger dough, too. -> morthanuf@yahoo.com

    Thanks again!

    ReplyDelete
  7. For Ben Moger-Williams,

    Please refer to Test float caption to the left and see if that is what you want.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  8. Fantastic! this worked so easily and perfectly too - many thanks!!

    Raspberry xx

    ReplyDelete
  9. Hey, how about just hovering a caption...without one on there..At least one or two blogs that I've seen have this..

    Like..

    [insert picture]
    hover cursor; caption appears in the label as an annotation but not underneath, like when one hovers the mouse over a profile and it says "My Photo" like yours, Peter..

    ReplyDelete
  10. That I believe is what one may call a tool tip created by a title attribute added to the HTML used to display the image. See Advice to complete the alt attribute (title attribute also explained)

    ReplyDelete
  11. Exactly what I was trying to do! Thank you!

    ReplyDelete
  12. Maybe I am a bit thick when it comes to this HTML stuff but I can NOT get a caption to appear underneath my pictures to save my life. I have tried everything you posted and I either get a warning message that it's wrong or the caption appears floating off somewhere far from the picture.

    If you could take a look at my blog and give me some help.. that would be great. I am kind of at the end of my rope with trying to do this.

    Thanks,
    Sandra

    ReplyDelete
  13. How to look when you don't give me the URL? Perhaps you can send the codes to me at contact me

    ReplyDelete
  14. Sorry about that! It usually comes up when you click on my name when I leave a reply... or so I thought. I will send you some of the codes. Thank you!

    ReplyDelete
  15. Ok well that didn't work AT ALL. Typed in the correct code to send the email and it said it was wrong. The link to send another way just led to a page for dishwashing soap.

    ReplyDelete
  16. I tested them and it was OK. But in any case you are not the first one to complain so I have now edited contact form with multiple options, you can try them all if you want. Thanks for the feedback. If you have more feedback, appreciated.

    ReplyDelete
  17. Hi Sandy,

    You said " The link to send another way just led to a page for dishwashing soap."

    Now that is something I don't like for my contact page but when I tested it, that never happened. Could you give me more details please?

    ReplyDelete
  18. I don't remember what the other link was and it's gone now that you've changed the page, but it lead me to a full page advertisement for Cascade dishwasher liquid.

    ReplyDelete
  19. thank you thank you thank you

    ReplyDelete
  20. Great post!! very informative.
    Thank you very much for such a lovely and informative post.
    Navratan

    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