Help:Image
From The Collaboratory
An image is a graphics file. Images may be photographs, diagrams, clipart, or even text. Common image formats include jpeg, GIF, and PNG. This help article describes how to upload, use, and manipulate images in the Collaboratory Wiki.
Contents |
Uploading image files
Before you can use an image on a wiki page you must upload the image to the wiki. When you upload images, please follow these guidelines:
Image size
- If possible, please resize and otherwise modify image properties before you upload the image. You can use readily available image manipulation programs such as Microsoft Paint, Adobe Photoshop, or GIMP (free) to edit images prior to upload. There are also web-based image manipulators, such as snipshot.
- In order to conserve space, please keep image size to 640x480 pixels or less whenever possible.
- If you need an image to be larger than 640x480 pixels, consider uploading it in grayscale or in indexed color in order to save hard drive space on the server.
- There is no need to precisely size your image so that it fits the page you're editing. You should upload a fairly high-quality version, and resize it inside your page when you include it (see below).
Image names
- When you upload an image, please name it an unambiguous and unique name. No two images in the the Collaboratory wiki (or any wiki) may have the same name.
- Thus "picture.jpg" is not a good name for your image. It is ambiguous, and chances are that someone else will try to upload another image named "picture.jpg" in the future, creating a conflict.
- "Kenya_TribeLeaderAtWell.jpg" is an example of a much more specific, and thus much better, name.
- If the image is primarly of a person, please include that person's first and last name in the image name.
- If the image is at a particular location, please consider including the location in the image name so as to disambiguate the image from other similar locations.
How to upload
To upload an image, follow these steps:
- Go to the file upload page.
- Browse to the location of the image you want to upload
- If the image name is ambiguous or otherwise needs to change, use the box entitled "Destination filename" to modify the name the image will have after it is uploaded.
- Enter a summary for the image
- Please use this summary to describe the image and its purpose. (This is useful in particular if the image must be renamed in the future.)
- You can use wiki code in the image summary, if you like. (This is useful for putting in links to the page where the image will go.)
- Click the "Upload file" button to upload the image.
After completing these steps you will be taken to a page that looks something like this.
Using images
After an image has been uploaded, you can use it in your pages. We will use KristaFrankReflection_ExampleImage.jpg to illustrate the use of images in a page.
Inserting an image directly into a page
To insert an image into a wiki page, you can create a link to it as you would any other page. The only difference is that all images reside within the special image namespace, and thus must be prefixed with "Image:" like this:
[[Image:KristaFrankReflection_ExampleImage.jpg]]
which produces:
Linking directly to an image
Sometimes you want to link to the image itself (on its image page) rather than insert the image in a page. To do this, simply prefix the link to the image with a colon:
[[:Image:KristaFrankReflection_ExampleImage.jpg]]
which produces:
Image:KristaFrankReflection_ExampleImage.jpg
This results in an inline image link, which simply drops an entire image in line with the text. To make the image look fancy, see manipulating images below.
Manipulating images
MediaWiki provides many ways to quickly and easily modify how an image appears on a page.
Resizing an image
There are several ways to resize an image. The easiest is to use the keyword "thumb" in the image link, setting it off with a pipe (vertical bar, |) character:
[[Image:KristaFrankReflection_ExampleImage.jpg|thumb]]
which produces an automatically sized thumbnail of the image. You see an example floating at the right side of the screen.
If you don't wish to float the image to the right, you can either relocate it or specify a size on an inline image. To specify a size, enter the number of pixels you wish the longest side of the image to be followed by the characters "px", and again seperate this from the other portion of the link with a pipe (vertical bar, |) character:
[[Image:KristaFrankReflection_ExampleImage.jpg|200px]]
which produces:
Relocating an image
To relocate (position) an image, you can use the keywords "right", "center", or "left". Here is an example:
[[Image:KristaFrankReflection_ExampleImage.jpg|100px|right]]
which will float an image to the right side of the screen. The text will wrap around the image to the left (as you see here).
Putting an image on the left produces the same general effect, with text wrapping around the image to the right:
[[Image:KristaFrankReflection_ExampleImage.jpg|left|100px]
which produces the image that you see to the left of this text.
You can also place an image in the center of the page. A centered image, however, will not cause text to wrap around it. Instead, text will fall above and below the centered image. Here is an example:
[[Image:KristaFrankReflection_ExampleImage.jpg|100px|center]]
which produces:
Notice that we are using these location keywords in conjunction with the resizing syntax, and also notice that the order of the image directives within the link does not matter. (In the left aligned image, the "left" and "100px" directives are in opposite locations of the other examples.)
Framing an image
One of the nicest features of MediaWiki is the ability to place an image conventiently within a frame using the keyword "frame" and seperating it with the usual pipe character:
[[Image:KristaFrankReflection_ExampleImage.jpg|framed]]
which produces the image you see framed to the right hand side of this page.
However, the "framed" directive ignores any resizing; it always displays an image at full size in a pretty frame. This can cause inconveniences when an image is too big for a page but you still would like to put it in a frame. Also, a large framed image can overlap other page features, making them difficult to read. Fortunately, there is a workaround.
The "thumb" keyword that we used before is a special kind of frame that allows image resizing. For example, let's make our example image float to the left of the page with a size of 200 pixels:
[[Image:KristaFrankReflection_ExampleImage.jpg|thumb|200px|left]]
which produces the image you see floating to the left of this text. (Usually, however, we simply allow an image to float to the right, which is the default. This is especially true because images which float to the left tend to be more disruptive to the flow of text on the page, much like this one is.)
Clicking on a "thumb" image will display the page with the larger image.
Adding a caption
When using framed images you can easily add a caption as if it were a seperate directive in the image link. To do this, simply type the caption text directly into the link and set it off with a pipe character:
[[Image:KristaFrankReflection_ExampleImage.jpg|thumb|200px|A sample image]]
which produces the captioned image you see floating to the right.
It is not possible to add a visible caption to an image that is not in a frame, although it is still possible to add caption (alternate) text which will show up when you hover over the image. To do this, use the same syntax, but don't put the image in a frame:
[[Image:KristaFrankReflection_ExampleImage.jpg|200px|A sample image]]
which produces:
To see the "A sample image" text, hover over the image with your mouse.
Image Galleries
Creating a nice little image gallery is easy using the <gallery> and </gallery> commands. Put each image name on a line along with the caption you want. The images are automatically scaled down and given the caption you specify. Here's an example:
<gallery> Image:Collaboratory 1.JPG | Our design element Image:Collaboratory 2.JPG | Another version of the DE Image:Collaboratory 3.JPG | Yet another Image:Sophia 016.jpg | One of these things does not belong... </gallery>
produces
 Our design element |
 Another version of the design element |
 Yet another |
 One of these things does not belong... |
Additional resources
If you need a Collaboratory design element (logo), you might choose one from Category:Design element.
For additional things you can do with images, please read MediaWiki's image help. Wikipedia also has a very useful page about image syntax.
