Adding Image Captions

classic Classic list List threaded Threaded
1 message Options
GregChapman GregChapman
Reply | Threaded
Open this post in threaded view
|

Adding Image Captions

This post was updated on .

Norfolk Hawker DragonflyThe distinctive green eyes indicate that this is a Norfolk Hawker dragonfly.

This post demonstrates one way to provide a caption for images. It's main disadvantage for ordinary users is that it requires that the box "Message is in HTML Format" is checked and that all content is wrapped in suitable HTML tags.

The principle is simple! Place the image and text that is to be the caption within a paragraph and style that paragraph appropriately. The paragraph is given a specific "class" to distinguish it from others.

In the current example the whole paragraph is given the class "captionr500". With that class the paragraph is "floated" to the right, in the same way that an image alone can be floated using the options on the image upload dialogue. It is also given a set width, a border and background colour. Any text is centred within the paragraph limits. The image is made to fill the width of the paragraph so the text that follows the image is forced beneath the image.

In this case the "set width" is a 50% of the width of allocated to the forum, so the size of the image and how the caption text wraps is dependent on window width. To ensure the image doesn't become too small to pick out any detail, should the space available for the image fall below a set level, the paragraph ceases to float and instead fills all the available width.

If the original image is large it may be better to display it in the full width of the forum rather than have it floated to the right. An additional paragraph style, "caption", provides for this. Similarly, if small, it can be undesirable to stretch it too far, so an further paragraph style, "captionr330" is available with a width of a third of the space rather than a half.

It is of course possible to further code or vary it so that the image will float to the left or have different proportions of the available width that the images occupy.

To use the three example styles in your forum go to your home page and paste the code below into the dialogue you find via:
Options > Application > Change Appearance > CSS

.nabble .caption {
	clear: both;
	background-color: #ddddee;
	width: 97%;
	text-align: center;
	font-size: 0.9em;
	margin: 5px;
	padding: 5px;
	border: 1px solid #666666;
}

.nabble .captionr500 {
	float: right;
	background-color: #ddddee;
	width: 50%;
	max-width: 510px;
	text-align: center;
	font-size: 0.9em;
	margin: 5px 0px 5px 5px;
	padding: 5px;
	border: 1px solid #666666;
}

.nabble .captionr330 {
	float: right;
	background-color: #ddddee;
	width: 33%;
	max-width: 250px;
	text-align: center;
	font-size: 0.9em;
	margin: 5px 0px 5px 5px;
	padding: 5px;
	border: 1px solid #666666;
}

.nabble .caption img, .nabble .captionr500 img,.nabble .captionr330 img {
	width: 100%;
}

@media only screen and (max-width:600px) {

.nabble .captionr500, .nabble .captionr330  {
	float: none;
	width: 100%;
	margin: 5px auto;
	padding: 5px;
}

}

Norfolk Hawker DragonflyThis example uses the "captionr330" style.

These two images use the same image file. Only the class associated with the paragraph changes.

Norfolk Hawker DragonflyThis example uses the "caption" style.

Greg