Using Images in Articles

The [file]image name|parameters[/file] code is used to insert large images into articles.

The image name is the name of an image article in the image namespace or in any other area you have chosen to store your images. If you are using images in your private blog or story you may want to keep the images in the associated area.

The parameters, which are separated by |, allow you to control the size, position and border of the image and to add a caption. These parameters are:
When the alignment is left or right the text in the article following the image is placed beside the image.

When the alignment is center the text in the article following the image is placed below the image.

The caption can contain text formatting codes such as [b] and [center].

When there are no parameters, the image is displayed full size and aligned to the left. The image code:

[file]1883 Grade 35.jpg[/file]

produces:



This paragraph, which is immediately after the image code in the article, is placed beside the image. With large images a lot of the article's text might be placed beside the image and it may be necessary to use empty lines both before and after the text so that only the relevant information is placed there.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

Even headings may be placed beside images, in which case inserting empty lines to get the heading in the right place can be necessary.

Of course you may intentionally want a heading beside an image.


Left, Center and Right work unambiguously with thumbnails, but may behave strangely without the sizing or thumbnail parameters.

[file]1883 Grade 35.jpg|right[/file]

Is an undecorated image on the right.

[file]1883 Grade 35.jpg|center[/file]

Is an undecorated image in the center.

Images created in the image namespace should be as large possible. Consequently, they can be too large when placed in an article. The thumb or thumbnail parameter causes them to be scaled down to a more suitable size. The image code:

[file]1883 Grade 35.jpg|thumb[/file]

produces:


Now the image is on the right! Also, it is surrounded by a frame, and clicking on the image or the bottom right symbol will open a window showing the image full size.

Again the text following the image code is placed beside the image.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

Using the alignment parameter you can force an image to be placed left, right or in the center of the page.

[file]1883 Grade 35.jpg|left|thumb[/file]

produces:



Again the text following the image code is placed beside the image.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.



In contrast [file]1883 Grade 35.jpg|center|thumb[/file]

produces:



Centered images are quite different because the following text is placed below the image instead of beside it.

An alternative to using thumbnails is to specify the width of the image in pixels. So

[file]1883 Grade 35.jpg|240px|right[/file]

produces:

Thumbnails are automatically created with a frame, but you can use the display option to put a border or a frame around other images.

For example:

[file]Poljot_Marine_Chronometer_22618_Movement.jpg|450px|right|thumb|Poljot 22618[/file]

produces



where there is a plain border around the photograph.

In principle, captions are straighforward. So

[file]1883 Grade 35.jpg|right|thumb|[b]HC and OF 1883 Grade 35[/b][/file]

produces:




Captions can be long and then they will wrap over 2 or more lines.


This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.

This paragraph is providing some text to fill in the space beside the photograph. However, changing the size of the window will affect how much space the text occupies and alter how it is displayed.







However captions are only displayed when there is a frame around the image; if you leave out the frame the caption parameter is ignored.

So

[file]1883 Grade 35.jpg|240px|right|This is a long caption to show that captions will wrap over several lines if needed.[/file]

produces:










In contrast

[file]1883 Grade 35.jpg|240px|right|thumb|This is a long caption to show that captions will wrap over several lines if needed.[/file]

produces:

This does seem to be working and may be a bug.
The caption will expand the size of the frame if thee is not competing material to use of the excess space and force the caption to fit withing the size of the image. We will repeat this text a few times to ensure it is large enough to impinge on the image space.
The caption will expand the size of the frame if thee is not competing material to use of the excess space and force the caption to fit withing the size of the image. We will repeat this text a few times to ensure it is large enough to impinge on the image space.The caption will expand the size of the frame if thee is not competing material to use of the excess space and force the caption to fit withing the size of the image. We will repeat this text a few times to ensure it is large enough to impinge on the image space.

If you do not put in enough text or empty lines between images then they will overlap. The extreme is:

[file]1883 Grade 35.jpg|240px|left|thumb|leftside picture[/file][file]1883 Grade 35.jpg|240px|right|frame|rightside picture[/file]

which produces:



And the following text appears in the middle between the two images, which is perfectly sensible.

There is an editor tool that is available in the Encyclopedia Editor. It is not shown when editing a post in the forums because it requires special processing that is part of the Encyclopedia feature.



The file button can be used to insert an existing file in the Encyclopedia collection. The file is selected by name from the dialog that appears when the button is clicked. You may select a new image from files on your workstation, or you may type the beginning of the name of the existing Encyclopedia file you want to use.

The dialog includes fields for the file parameters to be used by your article, or you may just edit those into the bbCode that is inserted as shown in the bbCode examples.

There may be a few display problems with some browsers.

When uploading a file to create an image, if the source file name contains space characters, they may be replaced with a substitute character like underscore. You may need to edit the image file name after uploading to ensure the name is consistent.