The Basics

Key points

In this subsection we will show you how to: include an image which is already available for use in WikiEducator; 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.

Basic syntax

The most basic syntax for adding an image is:

[[File:IMG_0057.jpg]]

You insert this where you would like the image to appear.

Explanatory notes

1. The syntax is contained within two square brackets;
2. For images, type the word "File" followed by a colon (:);
3. You must substitute the word "Name_of_Picture_goes_here.jpg", with the name of the file and its extension (the letters which appear after the full stop. The extensions for the image formats you can use are: .gif, .jpg, .png. and .svg). For example, if you wanted to insert a jpeg image on your computer called "Flowers_Sept06", you would type the following: [[File:Flowers_Sept06.jpg]].

Tip: There are a couple of things that are important to remember about adding images to the wiki. The first is that image names are case-sensitive. For example, if an image is called Picture.jpg then neither picture.jpg nor Picture.JPG will find it. Secondly, the only type of images that are usable on the wiki are images that end with either a .jpg, .gif, .png, or.svg extension. You must always include this extension in the filename, otherwise the wiki software will not know what file type you intend to upload.

With images, you can:

1. use an image that is already available on WikiEducator (in other words, an image that was previously uploaded onto the WikiEducator server), or
2. upload an image from your personal computer onto the server.

Using an existing image available on WikiEducator

We'll start with an image that is already available for use on WikiEducator.

Activity

To demonstrate this, try editing your User page or Sandbox and adding an image that already exists in the wiki. Navigate to the User page or Sandbox you created earlier in the tutorial. Add the wiki syntax below to your page by clicking edit and entering this syntax into your page. (You can select the syntax here and copy it, and then paste it in your User page or Sandbox): [[File:Message_pad.jpg]] Click on Save page to see the image displayed.

Tip: You can search for existing images on the Wiki by accessing a special page called the Imagelist. (Click on the link: http://www.wikieducator.org/Special:Imagelist) You can also find images on the Special pages link in the toolbox located on the left of every page. Follow the link to Gallery of New Files or Most linked to images.

Uploading a new image on WikiEducator from your computer

When you want to upload a new image onto the server, you use the basic syntax e.g. [[File:Picture.jpg]] After you have saved your page the wiki syntax will appear like this:

File:Picture.jpg

Note: If the image already exists on the wiki the image will appear right away, otherwise you will get a red link like the one above. The red link tells you that the image still needs to be uploaded onto the server.

The Upload File page

Now the second step: 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 should already be filled in for you 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, and perhaps its source; this box allows Wiki markup.

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.) Enter the image syntax and the name of your picture. 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 The correct syntax will look something like this: [[File:picture_of_me.jpg]] Click on the Save page button. 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.

Creating a gallery from existing images in WikiEducator

The wiki has a feature to create a gallery from images which are already available in the WikiEducator database. It uses the following syntax referencing the file names of images which are already available in the database. You also have the option of providing a caption for each image in the gallery.

<gallery>
 File:Image_file_name.png|Caption for first image goes here
 File:Image-file_name.jpg|Caption for second image goes here
 </gallery>

So for example, the following syntax would render the gallery display below:

<gallery>
 File:L4C-small.png|Learning4Content logo
 File:Mediawiki logo m.png|Mediawiki software logo
 File:Flag_of_New_Zealand.svg|Flag of New Zealand
 File:User@desktop1.jpg|Wiki skills workshop participant
 </gallery>
 

• 

  Learning4Content logo

• 

  Mediawiki software logo

• 

  Flag of New Zealand

• 

  Wiki skills workshop participant

Tip: Make sure that you use the correct file extension for the image saved in the database, eg .png, .svg, .jpg. If you use the wrong extension, the image will not display properly.

|