Wiki images
From LIS5313 Course Wiki
Contents |
How to upload images and embed them in your wiki
Uploading
On the course wiki there is a link in the toolbox (bottom left of the website) section labeled Upload file. You can also access it here: Upload file.
From here you can browse any file on your computer and upload it. For photos, please provide a description of the photo and attribution information in the "Summary" field. After clicking the Upload file button, you will be redirected to the upload summary page. This page confirms the new file name and gives you some useful information on versions of the image and where the file is used on the wiki.
Embedding
Once you have uploaded an image to the wiki, note the name of the image file. There are a variety of ways to display your image on your wiki page. I will show you a few different examples of displaying the image "Airplane Clouds.jpg". For more detailed information about how to format your images, see: Picture Tutorial.
Full Size Image
The code to display the image at full size is: [[Image:filename.jpg]] (or in this case, [[Image:Airplane Clouds.jpg]]). Image Example:
Thumbnail with Caption
The most common way to display an image on the wiki is with a thumbnail version of the image and a caption, with this code: [[Image:filename.jpg|thumb|Caption Text]] (or in this case, [[Image:Airplane Clouds.jpg|thumb|Airplane Clouds by Sara Smith]]). The "|" character that separates the different parts of the code is known as the "pipe" character. Image Example (note the default is to align on the right side of the page):
Thumbnail with Caption and Alignment
You can also specify the alignment of your image (or thumbnail) as left, center, or right with this code (example is for left alignment): [[Image:filename.jpg|thumb|left|Caption Text]] (or in this case, [[Image:Airplane Clouds.jpg|thumb|left|Airplane Clouds by Sara Smith]]). Image Example:
Adding Extra Space Before or After an Image
Often you may want to add additional space before or after an image so the image is placed where you want it. One way to do this is to add several line breaks (using this code: <br /> ) for each line break.
Additional Image Formatting Help
You can find additional instructions about how to add a frame and caption to your image, or how to position your image on the page, using these help resources:
