Tuesday, January 5, 2010

Add Captions to Blog Photos


Do you want to include captions with your garden blog photos? There are two ways this can be done. One way is to use purchased software and the other way is to write free html codes.

Most of the time, I use a software program (ImageWell by Xtralean Software) to add a caption before uploading the photo.

By adding the caption to the photo before uploading, the two are attached. So, if someone copies the photo, the caption is part of the image. Using software, it is very easy to change the font size, font color and position of the text.

However, it's difficult to use a hyperlink within the caption. Also, note that in the photo below, the caption is small. When I uploaded this photo, I selected the "small" format and Blogger adjusted the entire image.


Photo by Defining Your Home Garden

In the second photo, I added the caption using html codes. I also included an optional hyperlink to my blog.

To use html codes for captions, first upload your photo.

In the code below, the red text shows you the html "table" tag that I used to anchor the caption with the photo in the blog. I also set the font style, size and position of the caption. I kept this caption short enough to fit under the photo because I don't want to complicate the coding.

By using the "table" tags, I am treating the photo as one row of data and the caption as another row of data.

The "tr" tag represents a table row.
The "td" tag is used for table data.


The green text indicates the caption wording. The blue text indicates the hyperlink coding. I set the link to open in another window by using the "target" option.

The text in black was generated by Blogger when I uploaded the photo. I just wrapped the Blogger code with my table tags.

You can copy these pieces of code to play around with your own photo captions. The downside of using html codes is that it is a bit tedious. However, if you store these wrapper pieces in a text editor and then cut and paste the code around your photo code, it is a bit easier.

With the winter days keeping most of us indoors, this is a great time to share non-gardening tips. Next time, I'll show you how to use html to position two photos side-by-side.

This story was originally posted in February 2009. All photos and instructions by Freda Cameron, Defining Your Home, Garden and Travel

No comments:

Post a Comment