Wikieducator rich text editor tutorials/Images/Basics

Insert/Edit Image button


You will shortly become very familiar with Insert/Edit Image button on the Rich Editor toolbar as shown above. Clicking the button will open the Image Properties dialog box.

The Image Properties dialog box is used to select and manipulate images or graphics. Once an image is selected, clicking OK will insert it at the current cursor position.

With images and graphics, you can:


 * 1) use a file that is already available on WikiEducator (in other words, a  file that was previously uploaded onto the WikiEducator server), or
 * 2) use a file that is in the Mediawiki Commons, or.
 * 3) upload a file from your personal computer onto the server.

We cover all of these methods below.

Using an existing image available on WikiEducator
We'll start by adding an image that already exists on WikiEducator.

Using an image from Wikimedia Commons
The Wikimedia Commons is an international repository of free media and is the central media repository for all the Wikimedia Foundation projects. Using an image from Wikimedia Commons is almost identical to using an image already available on WikiEducator. A special interwiki feature enables WikiEducator to use images directly from the Commons. When an image is specified on a WikiEducator page using the identical file name of an image in the Commons, the image is automatically "uploaded" into WikiEducator, along with its corresponding data with reference to licensing. Using images directly from the Commons saves time and automatically sources images with permissible copyright licenses.

To use a Commons image, you first need to visit the Wikimedia Commons site to identify the exact file name of the image because the automatic search feature in the rich text editor does not search for images residing on external websites.

Uploading a new image on WikiEducator from your computer
When you want to upload a new image onto the server, one option is to use the image button,, in the Rich Editor toolbar to open the Image Properties dialog box. You then use the Image Properties dialog box to create a link to the image that you wish to upload. The benefit of this preparation is that the wiki will automatically remember the file name for you!

Creating a link to a file which does not exist generates a broken image icon in the editing area:. After you have saved (or previewed) your page the image file name will be coloured red, for example: File:PictureName.png



Once you have a red link to a file in your wiki page you are ready for the second step: Uploading the image! You need to upload your image into the wiki software for it to be displayed on the page in place of the red link. The way to do this is to click on the red link that has just been created for you by the wiki. This will take you to the Upload file page where you will upload your image into the wiki to be displayed.

The Upload File page contains a form that will allow you to select an image (or media file) from your own computer and upload it into the wiki. Clicking on the Browse button next to the Source filename field will open your computer's standard file open dialog. Use this dialog to navigate to and select the image you would like to add to the wiki. The Destination filename field should already be filled in for you (with the name you typed into the Image Properties dialog box) and will not need to be changed.

Each image actually has its own page that can be accessed by clicking on the image. The Summary field that appears on the File Upload form will appear below the image on this image page. Here you should include a brief description of what the image is, where it came from, its creator, its copyright, and perhaps its source; this box allows Wiki markup.

To make a gallery of images check out the tips page or carry on to learn about manipulating images.