Use the caption style of presenting graphics

The way to handle this page as a primer in using captioned graphics is to switch back and forward between “View Page” to see what is displayed and “Edit this page” to access the HTML coding. Please do not update the file. Yes, I have saved a copy of it, just in case you pay no attention to this request or forget it in the heat of the moment. But please don’t use up my valuable time in this careless way.

A good way to handle the switching back and forth is to have two browsers open, preferably displaying side by side on the screen – if you have a big enough screen. Then you don’t have to actually close the Edit file to look at the published result.

Getting to know how to use the caption style

This is how I learned to do it, and still use from time to time when I want to insert an image in one of the three styles – left, right and center.

Open this file, switch to HTML view and copy the coding for the image style you wish to use.  Now go to the file you are working on and paste that copied code into the file where you want it.  Next, get the url details for the image you want to use and use that to replace the two places where the image locator is named.  Yes, there are two places and both must be the same.

You may think this is a rather laborious way of handling it – but I found it saved a lot of frustrating time for me when my images wouldn’t display at all because I had some coding wrong.  Having two browsers open, side by side, saves a lot of time when you are using this work around method.

Captionedleft displays to the left of the following text.

John Pawley

Like most things, practice makes – if not perfect – fairly easy. You can use the HTML of this page as a template for the various formats that captioned style makes possible.

First, a clarification about Visual, HTML and the final result.

When you look at the Visual display of images in this Editor they display at an uncomfortable size on the screen. When you look at HTML you see the coding for the images, but not the images. To see the final result of your efforts you have to Preview or Publish or if you have published to Update.

I suggest you don’t Preview but that you Publish and then View the Page.

Here is captionedright. It displays to the right of the text.

New TI Logo

Generally I have found that Captioned Right is most useful. It seems to be easier for people to read the text from the left hand side of the page and images from the right hand side.

However, there is definitely a place for Captioned Left as well. Use your judgment, which should be your mantra at all times.

Both Left and Right together can be useful

Gerry Prewett

LGET Ross

A place where this can be useful is in displaying pix of 1st and 2nd placegetters in a contest.

blank
blank
blank
blank
blank
blank
blank
blank

Blank lines

Did you notice the blank space I added after that single centre paragraph. It sometimes happens that the amount of text you have doesn’t fill the space needed to the side of the image. Then following material may be inappropriately next to the image or images. These empty lines give you the required filler space. [The HTML will give you the coding for this blank space.]

Captioned Centre

Notice how captionedcenter grabs the whole space. No text can be next to it.

Our District Governor

Something else to notice is the name added under the image. You can put whatever you like – a name, a description or both. But if you put too much for the space available the extra will drop to the next line. You can put in a Return to force the text to take a new line at that point. See how I did that for my final Story Credit image. I encourage you to always add an image to your final Story Credit.

These Captioned Images are very useful and timesaving. The “title” in the coding is optional. However it is very important to include the “alt” which is what displays in the utterly tragic circumstances when the image doesn’t doesn’t display. This happened to me quite often in my early days using Captioned Images. I didn’t get the coding exactly correct. Computers do exactly what you say – they don’t try to work out what you meant.

Controlling image size

Look at the HTML of the image coding. Note that most are “width: 120px”. But I have given our District Governor a much greater weighting with 180px, while my image following this is a modest 100px.

Story by
David Nicholas

There are two other important ways of displaying images. One is by using a rotator. I will leave that style for the time being to retain an impression of expertise, even mystique.

The other is by using tables for displaying multiple images. That will be detailed soon.