Ads 468x60px

Pages

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnJ_ohjSZKJC76WKlynyngPbqOz86iJXwUj4u_U4UIqZe6X3YoDj3DlPV3GC44xpf9Rpgx8qmtpV35yhkUNNApTlxSS5m3rpsjQ8WFqoSMPU1umpdIjLoGjPmEMeTosk-TWV3TX6MZaU/s1600-h/Opera+-+problem+signing+into+Blogger.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEnJ_ohjSZKJC76WKlynyngPbqOz86iJXwUj4u_U4UIqZe6X3YoDj3DlPV3GC44xpf9Rpgx8qmtpV35yhkUNNApTlxSS5m3rpsjQ8WFqoSMPU1umpdIjLoGjPmEMeTosk-TWV3TX6MZaU/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>

0 comments:

Post a Comment