Help:Getting Graphic

From ControlWiki

There are two steps involved in putting graphic images on a wiki page:

1. Loading the graphic file onto the wiki server.

2. Referencing the graphic in your page.

Once a graphic is loaded onto the server, it can be used any number of times on different pages (or, on no pages at all -- just there for future reference).

Uploading a Graphic File

First, prepare the graphic file using Photoshop or some other program to be about the size you want, with suitable framing and quality (i.e., do any brightness and contrast adjustments you think necessary). Note, however, that there are ways to scale down a graphic when you put it on your page (see below). The resulting file must be less than 2MB, and should be in GIF, JPEG or PNG format.

Then, log in to the wiki, and click on the Upload file link in the toolbox on the left side of the page. Note that this link will only be present if you are logged in. This will take you to a page with a form, which you'll use to upload your graphic.

Use the Browse button to bring up a file selection window, and locate and select your graphic on your local computer system.

Back on the Upload File page, the Destination filename box should automatically fill in with the filename, but you can change it if you'd like a simpler or more explanatory filename for your graphic on the wiki.

You can also fill in some summary information, which might be useful to anyone finding your image file in the future and wanting to use it on another page. When you're ready to go, click on the Upload file button at the bottom of the page.

Using Your Graphic

Now begin editing a page on which you want your graphic to appear. At the point in the text where you wish to insert your graphic, type the filename you saved your graphic under (the Destination filename mentioned above).

You did write this filename down, right? If not, it's time to go looking for it. Click on the Special pages link in the toolbox at the left side of the page. Scroll down to Recent Changes and Logs, and click on the link entitled Gallery of new files (or, you can just click here). Find your graphic, and note the filename (including capitalization and spaces, which matter) directly underneath it. Now back to editing your page...

Once you've typed in the filename of your graphic, highlight it with your mouse and then click on the icon at the top of the editing window with the small picture on it. This will add the formatting around your filename to make it appear as a graphic on the page.

Note that the graphic, when it appears on your page, will be a link to a page devoted to that graphic, including any summary text you entered when you downloaded it.

Controlling Appearance

You can change how your graphic appears on the page by using one or more options embedded in your image tag. So far, your image tag should look something like this: [[File:my_filename.gif]]

Options can be added to this tag by inserting them within the square brackets, separated from the filename (and from other options) by the vertical-bar character "|" (this is sometimes called the pipe character).

For example to scale your image to a width of 150 pixels, you would change your image tag to look like this: [[File:my_filename.gif|150px]]

To align your image to the left (which is usually the default), the right, or the center of the page, you can use a left, right or center option such as: [[File:my_filename.gif|right]]

You can combine multiple options by separating each with the pipe character, as follows: [[File:my_filename.gif|150px|right]]

To put a lovely frame around your image, the frame option will do the job: [[File:my_filename.gif|frame]]

Now, let's say that you wanted your graphic to appear as a thumbnail (small) image embedded in the text, with a caption, where clicking on the image will take you to a larger view of it. The thumb option will do all of this, except for the caption.

For the caption, note that any text added to your tag that is not recognized as an option will be treated as a caption. For thumbnails, these appear under the image. For other graphics, they only show when your mouse "rolls over" the graphic.

So, the final tag that makes the graphic appear as shown here is: [[File:feedback.jpg|thumb|Feedback Loop]]