Editing Wikitext/Pictures/The Quick Course

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

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. You can modify these lines of code at will, on any page, to see how their options affect the display.

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'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 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:

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

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


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


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


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


 * 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
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 coloring, and that colored backgrounds are comparatively rare in the Wikibooks project.

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