Editing Wikitext/Pictures/The Quick Course

[edit] The Quick Course

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 realise, 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.

[edit] Get the Image Details

[edit] 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 its exact name and its copyright status, and these and other image details can be found in at least three different ways.

• The first method makes use of the Mayflower Image Search Engine . Simply follow the link and enter a few keywords to find a selection of images. Note the names of the images and satisfy yourself as to their copyright suitability. Then you are ready to type the image details onto a page.

• The second method makes use of image lists on the Wikimedia Commons website. The same images that are to be found using the Mayflower search engine can be searched in categories on the Wikimedia Commons. This site has various categories to browse, including Wikimedia Public Domain Images, and many others. Collect the details of any images that interest you, ready for working on your page.

• The last method is simply to get the details of an image that you like from some other Wiki page. 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 own work or in the Sandbox Editor. You can modify these lines of code at will, on any page, to see how their options affect the display.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[[Image:Hawthorn_blossom.jpg|250px|thumb|Hawthorn]]

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

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

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

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

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

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

[[Image:Magnolia_Watsoni.JPG|250px|thumb|Magnolia]]

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

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

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

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

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

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

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

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

[edit] Upload Your Own Image

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, 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 a small form for the details of the upload. The form has about six entries. It has been found easiest to copy the six-entry Information block into the Summary box before filling it in; this saves a bit of time. The other selections there include a Browse function to locate the image file within your computer, and a choice of copyright declarations where the originator's intentions can be assigned. In any case there are instructions on the upload page to explain the meanings of the entries for the form.

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 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 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.

Ascocenda Orchid  : Princess Mikasa
300x300 pixels

Insert the Image Code

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.

[edit] 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 separators in 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, when in the editing window, a selection of such symbols can be found at the bottom of each page. The standard form looks like this:

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

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 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). This text on the page wraps around it. 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 saved page versions are available in the History tab.

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: [[Image:filename|position|type|size|caption]] and; [[Image: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: [[Image:Close up lily.jpg|right|thumb|150px|Lily Stamens]] 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. Incidently, 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: [[Image:Ascocenda Princess Mikasa .jpg|left|thumb|150px|Ascocenda Orchid]] 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: [[Image:primula_aka.jpg|center|thumb|200px|Primula]] 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: [[Image:primula_aka.jpg|left|thumb|150px|Primula]] [[Image:Ascocenda Princess Mikasa .jpg|right|thumb|100px|Ascocenda Orchid]] Primula 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 properly fill the available space. Example of all three positions together: Fails in Internet Explorer. [[Image:Gazania_rigens-1.jpg|left|thumb|125px|Gazania]] [[Image:Blossoming almond tree.jpg|right|thumb|300px|Almond]] [[Image:Coleostephus_February_2008-2.jpg|center|thumb|125px|Coleostephus]] Gazania Almond Coleostephus The use of all left, right, and center positions will result in the alignment 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 will 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. The line-up is unstable however, because some browsers produce different results. Browsers apply different margins, text sizes and padding, and this can disrupt a layout. Although the page might look well in one browser, it could be a mess in another. For example, in the Opera and Mozilla Firefox 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 placed below the other two. Web page authors attempt to compensate for these differences in their style sheets, and by careful design. There is a similar failing in Mozilla 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. Methods for the tiling of images, (casually in line), and for locking them in place are discussed 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.

[edit] Adjust The Options

he sequence of image options is unimportant, and with the exception of the image name these entries are insensitive to case. All but the image definition is optional, though the omission of options will not always give reasonable results. 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 given below:

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.

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.

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 coloured 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.

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 combinations 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, though it should be clear that exact calculations by the user are not necessary.

When there are inconsistent dimensions...

That is to say, when the given dimensions seem to be trying to change the shape, only the smaller of the two possible sizes is produced.

Equalising widths or heights...

Knowing the exact dimensions is unnecessary, provided that both dimensions of the original images are big enough to scale. For example, to equalize the heights of mixed-sized images, use the double format with their heights set exactly, and their widths greatly exaggerated, (e.g. 2000x100px). This forces an inconsistent scaling that achieves the required result. A similar method can be used to equalise widths.

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 recognised...

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.

[edit] Use Image Templates

Rose, Queen Elizabeth: Frame-less

Rose, Queen Elizabeth: With a border.

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

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:

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

[edit] Find Other Methods

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 coloured 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 Tocbox is the other pages box with the links in it, and Hiddenh3 has made various headings without listing them 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.

[edit] See Also

• Sandbox Editor  : The Wikibooks editing window for users to try their code
• Image Licensing  : A Wikimedia page about copyright status
• Extended Image Syntax  : A good image reference text from Wikipedia
• Mayflower Image Search  : The Wikimedia image search engine
• Wikipedia Commons  : The Wikimedia main media resource page
• Templates A101.  : A WikiBooks text on making text, box, and drop templates.
• Templates Ready to Use  : A selection of ready made WikiBooks templates