Photo box with caption

This is only applicable for one or two CMS sites where the appropriate context has been established.

This Help File shows you how to:

• Set up a single image with a caption underneath it.

It assumes your CMS system is setup with:

• A style sheet which supports the class "picbox"

Prepare your photos

• Select, size and name your photos;
• use FTP to upload the photos.

Any old file name will do provided you can type it right. No spaces please – use underscore – and if you mix cases, be sure to match it exactly in the code.

When you use the {image} tag it assumes you are looking for photos in the folder uploads/images/ so you only need to specify folders within the uploads/images/ folder.  Additional Subfolders are fine.

Modify your page

The code to add is

<p class="picbox" style="width: 200px;">{image src="name.jpg" alt="text" }caption</p>

Essentially the class="picbox" is applied to a paragraph to create a box with no borders which will contain the image and the caption. Setting the width of the box to the width of the image ensures that caption fits underneath the image. Both image and cation will be centered in the notional box.

By default the picbox will float to the left of a page, and text will wrap round it. If you want the image and cation to the right use picboxr. For a centred image use picboxc.

style="width: 200px;" There will be a default width for a picbox (probably 300), but best to adjust the setting for each image.

src="name.jpg" change name to the name of the file, with subfolder name if needed. Images are assumed to be in the folder called uploads/images/

alt="text" set text to be the words that appear when you hover the mouse over the photo.

caption enter the caption here.

Last Update 17 November, 2008

Back to Help Index