Note: You can only add an image to a page after you have uploaded the image to the GCcollab Wiki.


Below is the code for placing an image (Monitors.jpg) uploaded to the Wiki on a page, and the result.

example code to insert an imageexample image


Alt Text

It is also recommended to add a caption to an image, using the pipe character. This alt text will appear when a user hovers their mouse over the image. This is an important feature for accessibility.


example to insert the same image, but with alt textexample with alt text visible: You are hovering over me!

Thumbnails

You can also add the image to a page as a thumbnail (smaller version) by following the code below. "thumb" tells the Wiki the image is to be added as a thumbnail, and "100px" tells the Wiki to make it 100 pixels wide.example code to insert the same image, but in a thumbnail form with a captionexample image in a thumbnail, caption says: "caption goes here"


Aligning Images

To align an image to the left or centre, simply add "left" or "center"(note U.S. spelling) as shown in the codes below.example code for two images, first aligned left and the other aligned right


Image Gallery

The basic syntax for creating a gallery looks like this:code for a gallery of three imagesexample photo gallery with three images, captioned "Water Drop", "Quebec" and "The Lake"


The File: line can be repeated for as many images as you have to display. To add a gallery to a new or existing wiki page:

  • Copy the text above in the box
  • Navigate to your new page
  • Paste the scaffold to re-create this layout on your own page
  • Copy and paste the File: line for each image you wish to add

Larger pictures are automatically scaled in size to match the Wiki standard dimensions of the gallery, and the number of images on each row of the gallery adjusts according to the dimensions of the display the gallery is being viewed on.