Editing Wikitext/Pictures/The Quick Course

Editing Wikitext

Fire Tulip; 210x280 pixels

Pink Tulips; 373x280 pixels

The Quick Course

T

his first Pictures page is intended for a quick study or for revision and will not bore you too much with discussion.. This page will show a Wiki writer how to fit images into their work using the most usual layout methods. For those who need only a coding summary, go straight to the image code examples in the drop-box of the section Insert the Image Code. A summary of image code options can be found in the section Adjust the Options. For those who need more complicated methods, for example, tables, gallery, or drop-control methods, refer to the Other pages links.

As the reader will realize, formatting in Wiki uses Wikitext mark-up code. To make the learning task a bit easier, code modules have been prepared for the various parts of the work. At various points in the text there are panels or drop-down boxes that contain the blocks of code. The code is easily pasted into the Wikibooks Sandbox Editor, to try the formats for yourself. As a general rule, the best method for new formatting is to carry out the testing of your ideas in the safety of the Sandbox, before pasting them into your work.

Get the Image Details

Find a Wikimedia Image

Many thousands of images are already stored in the Wikimedia Commons image database. The main pieces of data to obtain about the image are its exact name and its copyright status, and these and other image details can be found in two ways.

The first method makes use of image lists on the Wikimedia Commons website. The same images that were in the past to be found using the Mayflower search engine are now found in categories on the Wikimedia Commons. This site has various categories to browse, including Wikimedia Public Domain Images, and many others. Collect the details, name, size, etc, of any images that interest you, ready for working on your page.
The second method is simply to get the details of an image that you like from some other Wiki page. (Wikipedia or Wikibooks). To find all of the details of any image on a Wiki page, just left-click it with the mouse to go to its image description page. If you just need to know the name or the rendered size of an image on a page, then right-click the image and read the details in the image properties.

Finally, because users might need some samples to study image layouts, the drop-box below has a set of code lines that can be used to produce high quality images in either your pages or while experimenting in the Wikibooks Sandbox Editor. You can modify these lines of code at will, on any page, to see how their options affect the display.

Image Code to Try

Ready-to-use Image Code :

the flowers set...

This list contains a selection of ready-made flower image formats. These make thumbnail images with a base dimension of 250 pixels, have a border on them and a caption. They are located by default on the right of the page, though an extra option can be added to specify left, right, or center.

Copy individual image lines into the Sandbox or directly into your work. Satisfy yourself as to the copyright conditions on the individual image pages when planning their use. For an overview of how to use images, read the other pages in the Editing Wikitext/Pictures series.

[[File:Jonquil flowers06.jpg|250px|thumb|Narcissus]]

[[File:Chamomile@original size.jpg|250px|thumb|Camomile]]

[[File:2006-10-18Dahlia03m.jpg|250px|thumb|Dahlia]]

[[File:Galanthus nivalis close-up aka.jpg|250px|250px|thumb|Snowdrop]]

[[File:Tulip - floriade canberra.jpg|250px|250px|thumb|Tulip]]

[[File:Gerbera pink.jpg|250px|thumb|Gerbera]]

[[File:Nymphaea tetragona.jpg|250px|thumb|Waterlily]]

[[File:Primula aka.jpg|250px|thumb|Primula]]

[[File:SunFlower1.jpg|250px|thumb|Sunflower]]

[[File:Hippeastrum flower.jpg|250px|thumb|Hippeastrum]]

[[File:Red_chrysanthemum.jpg|250px|thumb|Chrysanthemum]]

[[File:crocus_4.jpg|250px|thumb|Crocus]]

[[File:petunia2.jpg|250px|thumb|Petunia]]

[[File:Marigold top (aka).jpg|250px|thumb|Marigold]]

[[File:Oriental poppy.jpg|250px|thumb|Oriental Poppy]]

[[File:Rose Unknown 100 20070601.jpg|250px|thumb|Rose]]

[[File:Gazania_rigens-1.jpg|250px|thumb|Gazania]]

[[File:Cichorium_intybus-alvesgaspar1.jpg|250px|thumb|Chicory]]

[[File:Cerasus blossom.jpg|250px|thumb|Hawthorn]]

[[File:Ascocenda_Princess_Mikasa_.jpg|250px|thumb|Ascocenda Orchid]]

[[File:Krokus-kih.jpg|250px|thumb|Crocus]]

[[File:Leucanthemum_vulgare_'Filigran'_Flower_2200px.jpg|250px|thumb|Daisy]]

[[File:Hatiora_×graeseri_flower.jpg|250px|thumb|Hatiora]]

[[File:Coleostephus_February_2008-2.jpg|250px|thumb|Coleostephus]]

[[File:Blossoming almond tree.jpg|250px|thumb|Almond]]

[[File:Magnolia_wieseneri.jpg|250px|thumb|Magnolia]]

[[File:Flower_jtca001.jpg|250px|thumb|Gazania]]

[[File:A_sunflower.jpg|250px|thumb|Helianthus]]

[[File:Chrysanthemum morifolium November 2007 Osaka Japan.jpg|250px|thumb|Chrysanthemum]]

[[File:Gladiolus 7-19-06.JPG|250px|thumb|Gladiolus]]

[[File:Smithsoniangardens1.jpg|250px|thumb|Lilium]]

[[File:Lilium longiflorum.jpg|250px|thumb|Lilium Longiflorum]]

[[File:Hyacinthoides_non-scripta_(Common_Bluebell).jpg|250px|thumb|Bluebell]]

[[File:Prettypinkflowersfromuva.jpg|250px|thumb|Pelargonium]]

[[File:Fire tulip.jpg|250px|thumb|Fire Tulips]]

[[File:チューリップTulip1.JPG|250px|thumb|Pink Tulips]]

Flower set thumbnails

High Quality Images of Flowers
Magnolia Blossom
Alpine Violet
Pansy
Clematis Josephine
Clematis Hybrid
Narcissus
Camomile
Dahlia
Snowdrop
Tulip
Gerbera
Gerbera, Big yellow
Waterlily
Primula
Sunflower
Hippeastrum
Chrysanthemum
Crocus
Petunia
Marigold
Oriental Poppy
Rose
Rose
Rose
Gazania
Chicory
Cherry
Ascocenda Orchid
Crocus
Daisy
Hatiora
Coleostephus
Almond
Magnolia
Gazania
Helianthus
Chrysanthemum
Gladiolus
Lilium
Lilium Longiflorum
Bluebell
Dahlia
Pelargonium
Fire Tulips
Pink Tulips

The image details can be found on the individual image pages by left-clicking with the mouse

Upload Your Own Image

Y

our own images can be uploaded to the Wikimedia Commons image database, for use on any Wikibooks page. In fact, they will become available to any user. It works like this.

The edit this page version of each Wikibooks page, including this page's edit page, has a link in its margin called Upload file, but images can only be uploaded by users who are first logged-on. Following that link leads to the Commons upload pages, where instructions can be found. Perhaps the best current method of making an upload is to access the Wikimedia Commons home page, then by selecting the Upload file link it its left margin, you can follow your way through the upload wizard, making life much easier.

When there is a choice, images are best uploaded in the largest available size. This gives the user the greatest possible choice as to its dimensions on the page. Images can always be reduced in size on the work pages themselves, by specifying their sizes in pixels within the mark-up code. As soon as an image is uploaded, its own dedicated image page is shown. This page repeats all of the data given by the contributor, including the copyright status. Once the image file is uploaded, it is available immediately for use in your work, and by others.

Insert the Image Code

I

mages are placed on a page by typing an image code along with any other text. As with the typing of text, this is done in the editing window of the page being edited. Selecting the edit this page tab at the top of the page accesses the editing panel, and all of the user's preferences and other links can be found at the top of each page as soon as the user signs-on.

The Basic Image Code

Without more ado, this section introduces the most comprehensive image code first. It contains all of the features likely to be of interest to the writer. The standard form includes an image name and file type suffix, a page position, a border type, an image size, and a caption.

The vertical-bar separators in the code are called pipe symbols. It is important to learn where these are on the keyboard since they are used in all image work. On some keyboards they are not located in the marked positions. Shift-backslash and Ctrl-Alt- top-left are common locations on keyboards for this symbol. In any case, if it cannot be found on the keyboard, there is a selection of such symbols to copy, at the bottom of each editing page. The standard form for the most useful image code looks like this:

[[File:Image file name|Position|Type|Size|Caption]]

The practical format of a typical image line, suitable for a page is like this:

[[File:Gerbera_pink.jpg|right|thumb|200px|Pink Gerbera]]

The image to the right of this text was made with the above code line. The coding makes an image at the right margin of the page, (right). It is in the style of a thumbnail, (thumb), which by default, has a border; there is a link to its image page. It has a base dimension of 200 pixels, (200px), and a caption beneath the image, within the border, (Pink Gerbera). If the caption were made longer, then the text would wrap neatly on several lines. The text of the page itself wraps neatly around the image also. In fact, depending upon the position of the image code line on the page, the point from which the accompanying text starts to wrap can be changed. This point will become more clear with the examples in the drop-box below.

Beware of transferring your work from word processors, since some characters may not be supported by the Wiki editor. If in doubt, first copy the code into the Sandbox for testing. To back-up your unfinished mark-up code, you can copy your text from the sandbox editing window and save it in Notepad, the windows accessory. Notepad is a plain text device, and affects the mark-up code least. Note also that all of the saved page versions are available in the History tab, should they ever need to be restored to the form that existed at an earlier date.

The basic image placement examples are given in the drop-box below:

Basic Image Layout Examples

The general form of the preferred format and an example of it is given below:

[[File:filename|position|type|size|caption]]

and;

[[File:Close up lily.jpg|right|thumb|250px|Lily Stamens]]

In each case, when a single pixel, (px), figure is given, it refers to the base dimension of the image; the rest of the image is scaled in proportion. Read the code carefully in the examples below:

Example of a RIGHT- positioned image:

[[File:Close up lily.jpg|right|thumb|150px|Lily Stamens]]

The code above produces this display. The size was reduced to 150 pixels to fit the example. The text wraps to the left of the image. In fact, any text which lies above the image code line in the editing window would extend across the page. For this case, it is the text typed after the image code line in the editor, which starts to wrap. To prevent text of the next section from closing up and wrapping along side this image , a special code can be placed in the line immediately before the work of the new section to make sure it uses the whole width of the page. The code to use is:

<br clear="all">.

This code is often placed in the line above each section heading, and is often found to be the solution to confusing problems involving overlapping text. Incidentally, this particular code works within the text of a main page but will not work in a drop-down box such as this.

Example of a LEFT-positioned image:

[[File:Ascocenda Princess Mikasa .jpg|left|thumb|150px|Ascocenda Orchid]]

This example also uses all four options. It is shown on the left. It is smaller than the one in the main page, and the caption has been simplified for this example. As with the above case, the text wraps from a selected point. The left and right examples comprise the main methods for automatic text wrapping. Compare these with the next example.

Example of a CENTER-positioned image:

[[File:primula_aka.jpg|center|thumb|200px|Primula]]

This image is shown in the center and for this example the text cannot wrap; it must follow-on beneath the image. This following-on of text is characteristic of centering and all other positioning of images,(absolute and relative positioning included). Left and Right image placement are special cases.

Example of both LEFT and RIGHT-positioned images:

[[File:primula_aka.jpg|left|thumb|150px|Primula]]
[[File:Ascocenda Princess Mikasa .jpg|right|thumb|100px|Ascocenda Orchid]]

This combination allows the wrapping of text between the two images, since it is comprised of only the left and right positions. As long as the center position is avoided, then wrapping is automatic. If one image were deeper than the other, the text would still properly fill the available space.

Example of all three positions together: Alignment fails in Internet Explorer before version 7.

[[File:Gazania_rigens-1.jpg|left|thumb|125px|Gazania]]
[[File:Blossoming almond tree.jpg|right|thumb|300px|Almond]]
[[File:Coleostephus_February_2008-2.jpg|center|thumb|125px|Coleostephus]]

The use of all left, right, and center positions will result in the alignment of all three across the page, provided that the last image line is that for center, but will otherwise fail. Note that although text will wrap to the side images, it must always follow-on below the one in the center. That is to say, for the best use of space keep the largest image away from the center position. Sadly, this layout does not suit some browsers. (See Browser Compatibility below).

Browser compatibility and other image methods This last all-in-line layout looks useful in that it fills the space well, and for the most recent browsers it undoubtedly makes a neat layout. The line-up is unreliable for older browsers however, because they interpret HTML code differently. Browsers apply different margins, text sizes and padding, and this can disrupt a layout. A Wiki writer must consider how the page will look in the majority of browsers; many older browsers are still in use and their update prevented by changes in platforms and other factors; (e.g. Win98 cannot use a browser beyond Explorer 6).

To explain further, in recent Explorer 8, Opera 9, and Firefox 3 browsers, this three image line-up will be seen all-in-line; but in some other browsers, for example, Internet Explorer 6, the center image will be displaced below the other two. Programmers attempt to compensate for these differences in their style sheets, but authors too, can help by understanding these limitations.

There is a similar failing in some versions of Firefox for a centered gallery of images; a gallery will be seen to shift to the left of the specified center position, whether it stands alone or is within another structure, such as a drop-box.

For those who need more methods for image layout, there are notes for the tiling of images, (casually in line), and for locking them in place, in Tiled Images and Images in Containers respectively.

When such a line of image code is in place, press the Show preview button at the bottom of the editing window and wait for the system to display the reformatted page. If the image position is left or right then the text will be seen to wrap. If the center is selected, (or none), then the text cannot wrap, and the text will move to a point below the image.

In any case, if the rendered result is not as expected, then the text can be changed as often as is necessary, until it is right. When the work is right, press the Save page button at the bottom of the page to store the revised page for other web users to see.

Adjust The Options

T

hese notes describe the image options in detail, and are correct at the time of writing.

The sequence of image options is unimportant, and with the sole exception of the image name these entries are insensitive to case. However, it is recommended that a size is always included, to avoid enormous image sizes. The general coding format and the most useful options for the image syntax are again given below:

[[File:File_Name|Position|Type|Size|Caption]]

POSITION: The horizontal position on the page...

When position is not specified...: The default position is right when the border type is set to frame or thumb, else it is left.
The position options...: These are right, left, center, or none.
To wrap text around images...: Choose either the left or right image positions, or one image set to each, for wrapping between two images.
To force text to follow-on...: Choose center or none since these cannot wrap text.
To fix an image without wrapping...: Choose none. This forces the image onto a new line at the left.
For an image in a table cell...: Set the position to center within the image code, and if necessary, set the vertical position with a CSS style in the respective table element.
Additional note...: The positioning of images at left, right, and center, when there is a similar image already occupying some space, can result in these terms being interpreted as relative to the remaining space. These images are said to float. By contrast, an image set to none is non-floating, and it does not permit anything alongside it.

TYPE: The border type for the image...

When type is not specified...: An image with no border is produced.
The type options...: These are thumb, frame, or border.
For a border, caption, and scaling...: Use Thumb since it has the most scope.
For a border, caption, but no scaling...: Use Frame, but only for same-sized images.
For a very faint border...: Use border. This is useful when an otherwise border-less, pale image needs a slight color separation from a pale background.
Make a user-sized thumbnail on the right...: Set thumb with only the image details. The size will be set in accordance with the user-set preferences. The size will be seen locally, and others will see their own, or its default.
Images on colored backgrounds...: Avoid thumb, since an unwanted white margin might be seen. Consider the use of a frame-less image to avoid it.
Images for table cells...: These should be border-less. There are problems with framed image captions, and the borders are best made with table properties.
Image captions...: These are possible only with thumb and frame, though the template set Noframeleft, Noframeright, Noframecenter, and Noframenone permits captions for frame-less images and gives more scope in the making of custom borders.

SIZE: The image size, not counting any borders...

When size is not specified...: The image will be full-sized, and in most cases would be too big. However see comments about user-set thumbnail type.
Resizing an image...: This is possible for all option types except when the frame type is chosen.
Units of image measurement...: The units used for images are pixels, and the size of an image applies to the image only; any borders add to the overall layout.
There are two image size formats...: The required image size can be specified as just its width, or as its width and height. It cannot be specified as height alone.
The single size format...: This is the pixel size of the image's base, with the shape preserved. Screens render images as about 70 to 100 pixels to the inch. A typical entry is e.g. 240px.
The double size format...: This is the base dimension times the height, e.g. 240x150px, when both are known.
When there is an inconsistent dimension given...: That is to say, when one of a pair of dimensions seem to be trying to change the shape, only the smaller of the two possible image sizes is produced.
Equalizing heights of mixed image shapes...: Knowing the exact dimensions is unnecessary. For example, to equalize the heights of mixed-shape images, use the double format with all of the size code set for the required common height, and their widths greatly exaggerated. This forces an inconsistent scaling that achieves the required result. For example, two images that are 350x150px and 700x450px are clearly of different shape. To display the two side by side, both with a height of 100px, we set their image code to say 900x100px and 900x100px. The obvious 900px inconsistency is ignored and the 100px is taken as the useful dimension for scaling. The shape of each image will nonetheless be preserved without having to re-calculate the exact dimensions.

CAPTION: The caption that goes inside the border...

When caption is not specified...: Only thumb and frame permit captions, and they can be omitted to leave an empty space.
Format caption text...: Use HTML tags, Wikitext and hyperlinks to format captions.
Use text templates ...: Templates can be used to format captions. They can reduce the effort and add consistency to the appearance.
Options that are not recognized...: When an image option is misspelled or otherwise not understood, it will be taken as a caption, or as alternative text for the image placeholder. When there are two possibilities only the first is taken.
What is alternative text?...: The empty box for an image is called a placeholder, and text can sometimes be found in it; this is the alternative text. When the image is not available, or when software for the disabled reads the page, this text can be used.
Alternative text or captions...: When captions are impossible because of the border type, an attempt at adding a caption is taken as alternative text. When a caption is possible, it is also used as the alternative text. Having different captions and alternative texts in images is not possible.

Use Image Templates

Rose, Queen Elizabeth: Frame-less

Rose, Queen Elizabeth: With border

T

here are occasional inconveniences in the  use of the basic image syntax.

For example:

The basic options allow captions for only frame and thumb types.
Images with borders on colored backgrounds often show unwanted white margins.
Custom made borders are not possible.

These points, when necessary, can be overcome by displaying the image within a template. In particular, the Wikibooks templates Noframeleft, Noframeright, Noframecenter, and Noframenone were made for this purpose, and images made with them behave in much the same way as the basic image examples.

Each template in the set is made for the appropriate position on the page. Two examples of template use can be seen on the left and the right of the page; The left image is an example of a frame-less image with a caption and was made with Noframeleft. The image on the right was given a border with Noframeright. Compare the absence of white margins with the orchid and gerbera images shown elsewhere on this page.

The code to make use of these templates for this specific result is just:

{{Noframeleft|1=[[File:Rose_Queen_Elizabeth_20070601.jpg|200px]]|2=Rose : ''Queen Elizabeth''}}
{{Noframeright|cwidth=200px|border=4px outset darkgreen|1=[[File:Rose_Queen_Elizabeth_20070601.jpg|200px]]|2=Rose, ''Queen Elizabeth'': With a border.}}

It should be stressed that the white margins for thumbnails do not pose any problems for the default page coloring, and that colored backgrounds are comparatively rare in the Wikibooks project.

Find Other Methods

T

here are other image layout techniques. The tiling of images is covered in Tiled Images, and explains how to overlap images and how to line them up across the page. A separate page on image containers has been provided at Images in Containers, and gives methods for tables, galleries and drop-down boxes. For example, the top section of this page is made with an invisible table container, and the colored background is made by placing the page within styled HTML div tags.

As was described in the previous section, writers have developed templates. Examples include caption-making, text-formatting, and image placement. Templates allow laborious formatting to be done without the need for the coding that usually accompanies such work. The writer need only add text to a few key words for the formats to be added automatically.

Specific examples of templates in use may make the point more clearly. The drop capitals on this page make use of a template called Drop. The what to type panels of whatever color use the template Block, and the drop-control boxes for the examples use Dropimage. The template Hiddenh3 has made various hidden headings, headings with the correct formats but without a listing in the table of contents.

It is not proposed here to explain template making but rather to provide a link to a page that does so. See Templates A101. To see a few examples of existing templates, see Templates Ready to Use.