The Basics

Key points

In this subsection we will show you how to: include an image which is already available for use in WikiEducator; include an image which is in Wikimedia Commons; upload a new image from your personal computer. In the next subsection, we will show you how to manipulate the way images are displayed on the page.

Insert/Edit Image button

Highlight of the Insert/Edit Image button on the Rich Editor toolbar

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.

Image Properties dialog box with no file name entered

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.

Tip: Some important things to remember about adding images to the wiki:

• Image names are case-sensitive. For example, an image called Picture.jpg is different from picture.jpg and Picture.JPG.
• The only types of images/graphics that are usable on the wiki are files that end with one of the following extensions: .jpg, .gif, .png, or .svg.
• You must always include the original file name extension as the 'destination' filename on WikiEducator; the wiki software uses this extension to know what type of file you are uploading.
• If you use the wrong extension, for example inserting the file name Mypicture.jpg to upload an image which is actually Mypicture.png, the wiki will publish an error message.

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.

Activity

Add an existing image to your user page or sandbox Click on the link to your user page (remember it's located in the top right of the screen if you are logged in) and navigate to your sandbox page. Click on the edit tab and enable the Rich Editor (if it is not enabled). Click on the Insert/Edit Image button in the toolbar. The Image Properties dialog box displays. Type "Message_pad.jpg" in the Image file name text area. As you type, available files will display in the Automatic search results window. Click on the identical file name which appears in the Automatic search results" window. You should see a preview of the image, a message pad with pen, appear in the area to the right of the text boxes. Click on OK at the bottom of the dialog box to see the image displayed in the wiki page. Click on Save page when you are satisfied.

Tip: You can search for existing images on the wiki by using special pages. Start by opening the Special pages link in the toolbox located on the left of every page and then look for one of the following listings:

• File list,
• Gallery of new files, or
• Most linked-to files.

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.

Example

The image of the respiratory system shown at right can be found on the Wikimedia Commons at this URL: http://en.wikiversity.org/wiki/File:Respiratory_system_complete_en.svg The name of the file is the text which appears after "File:", in this case "Respiratory_system_complete_en.svg" Note that the file name is case sensitive and you will need to enter the name into the Image file name text area of the Image Properties dialog box exactly as it appears in the Commons URL. Watch this screencast demonstration.

Activity

Add a Wikimedia Commons file to your user page or sandbox Find the image name that you collected in the search Mediawiki Commons activity. Click on the link to your user page and navigate to your sandbox page. Click on the edit tab and enable the Rich Editor (if it is not enabled). Click on the Insert/Edit Image button in the Rich Editor toolbar. The Image Properties dialog box displays. Type your "image name" in the Image file name text area. You probably will not see a preview of the image in the dialog box. Click on OK to see the image displayed in the wiki page.   If you don't see the image you expect, click on the Insert/Edit Image button in the toolbar to try again. Click on Save page when you are satisfied. The image is now published on your page.

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

Tip: The red link tells you that the image still needs to be uploaded onto the server. If the image already exists on the wiki or in Mediawiki Commons the image will appear on the page. If you had wanted to create a new image, you will need to change the file name -- unless you prefer this existing image to the one you wanted to upload <smile>.

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.

Key points

Whenever you upload an image, you should: Always tag your image with one of the image copyright tags. (When in doubt, do not upload copyrighted images.) Use the image description page to describe what it is, where it came from, its creator, and its copyright status.

Activity

Practice uploading a new image into the wiki and inserting it into a page by inserting a picture of yourself onto your User page. Go to your User page. (Remember that you must be logged in to do this. Click on your User name after the image at the very top of any page.) Insert the name of your picture in image properties dialog box like you did in the first activity. Note the name you enter here does not have to be the same as the actual name of the picture you will upload. The wiki will rename the image if the names are different. Tip: Name your picture something like: substitute_your_username_here.jpg Click on the Save page button. The correct syntax will look something like this: File:picture_of_me.jpg Click on the red link that should appear on the page where you entered the image syntax. Use the Upload file page to search for the image on your computer and load into the wiki. After your image has uploaded you should see the picture displayed. There should now be a link back to your page at the bottom of the File upload page after the text The following pages link to this file. Click on the page listed to return to the page where you inserted the image.

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

|