Paul's Playground

Pictures in frames, with caption
How to add captions to images in the editor, as in my first two articles:

• Tree and Plant Frost Protection (http://davesgarden.com/guides/articles/view/319/)
• Winterizing Plants and Trees (http://davesgarden.com/guides/articles/view/362/)

First drag the image to the right place in your article.  Then, select the option to view the source of the article.  Find the image link which should look something like this:

and add a "vspace" attribute which will serve to space the image away from the caption:

Next, add a container code, before the image code, which will be styled to hold the image and caption and provide the separating space and border:

This is the code for a left-aligned image.  For a right-aligned image the margin, padding, and alignment have to be slightly different:

Note that in both cases the "width" attribute on the container needs to be set the same as the "width" attribute in the image element, which was automatically set for you when the picture was dragged into the editor (225 in this case--don't forget that it needs a "px" appended to it, even though there is no such suffix on the attribute in the image element).

Finally, we add the text of the caption and mark the end of the container:

Here's another example with a different image, this time right-aligned:

Now you can return to the normal view to see what it looks like.  It is all right to edit the caption text from the normal editor page, but dragging the image somewhere else could have strange side effects.  If you decide you need to move or change the image, you will need to return to the source view and cut-and-paste the whole block of code into a new location, or delete it if you wish.

Avoid placing photos at the very end of the article with this method, where they may end up overlapping site features that end up below the article after it is published.  Also, be careful of stacking these photos up against each other as strange effects can occur.