An Article Start to Finish: Using Images in MediaWiki

2006-12-10T12:59:24Z

Week 5

1 Learning Objectives
2 Introduction to the Lesson
3 Demonstrations and Learning Activities
- 3.1 Locating an Image
  - 3.1.1 Hands-on Activity
  - 3.1.2 Hands-on Activity
- 3.2 Linking an Image
  - 3.2.1 Hands-on Activity
4 Adding an Image to Your User Page and Categorizing
- 4.1 Hands-on Activity
5 If you want to learn more

Learning Objectives

After completing this lesson the participants will:

Know where to locate appropriate images to add value to their article
Understand Copyright issues and make wise decisions
Know the correct size and resolution for Web-based images
Upload an image and enter its appropriate Metadata
Enter Wiki-markup to link multimedia elements in their article

Introduction to the Lesson

The World Wide Web is a visual environment. People tend not to read long columns of text online. Adding appropriate multimedia elements to provide some variety to your content is very important. Those elements help to break-up long columns of boring looking text. As the old saying goes, "a picture is worth a thousand words."

In this lesson we will learn how to add and images, short videos, and other types of media to your article page. We will also learn about some of the things you need to consider in regard to the use of other's intellectual property, and relevant copyright laws.

Finding graphics is not that hard. There are millions of photographs, drawings, and other types of images in the public domain or otherwise licensed in manner that allows their use. In the Learning more section below you will find links to several sites where you will find images and other types of media that you can freely use in your article.

By the time you finish the activities below you will be well on your way to becoming a MediaWiki pro.

Demonstrations and Learning Activities

Locating an Image

These hands-on activities will help ensure that you find an image with an appropriate copyright, be sure it's an appropriate size and resolution, upload it to the Collaborate wiki, and then link it to your article.

Hands-on Activity

Find an appropriate image that supports the content of your article.
- If the image is one you created yourself and you are willing to make it available under a Creative Commons 2.5 Share-alike Non-commercial license for use on the eXtension wikis, then you're good to go.
- If the image is not of your own creation put a link to the image's location and copyright information on your User page. A message will be left for you on your talk page informing you if it has a copyright that will allow it to be used on the Collaborate wiki. Do not proceed to the next activity until the copyright has been cleared for use by your instructors.

Hands-on Activity

Images for viewing online should be no larger than 300x225, and a resolution of 72 dots per inch (dpi). It should be saved in a jpg or png file format. If you need help doing this contact your instructors. They would be happy to assist you in manipulating your image to be the correct size and format.

Screencast #1 Using Images in MediaWiki- uploading (Transcript: Using Images in Mediawiki - uploading)

Once your image's copyright has been cleared for upload, and saved in the appropriate size and resolution:
- Watch the screencast demonstrating file uploads, and upload your file to the Collaborate wiki
- Complete the file upload information screen (metadata) presented to you after the upload has been completed.

Step-by-step guide to Uploading Images for use in MediaWiki

Linking an Image

The next step is to provide a link to your uploaded image from your article. This is almost an identical step to creating an internal link which you completed in last week's activities. In MediaWiki there is almost always more than one way to complete a task. In the next activity we'll show you the most common method. Let's do that now.

Screencast #2 Using Images in MediaWiki- linking (Transcript: Using Images in Mediawiki - linking)

Hands-on Activity

After watching the screencast on linking to images, go to your article and create a link to your image.
Add additional information to the link so that your image will be displayed with a border. Can you think of how you might make the image display on the righthand side of your article? How about adding a caption?
Add your image to the same category that you used for your article.

Step-by-step guide to Linking Images in MediaWiki

Step-by-step guide to Adding a Category to your Image in MediaWiki

Adding an Image to Your User Page and Categorizing

Finally, we're going to have you repeat the process of uploading, and linking an image. This time you'll be uploading a photo of yourself. This is some additional practice to be sure you've got it. We're going to use these photos to create a "gallery" of seminar participants on a dynamic page. This is way cool, and we think you're going to like how this works.

Hands-on Activity

Upload a photo of yourself to the Collaborate wiki. Make sure the image complies with the appropriate size, resolution, and file formats.
Place your image in the category: portrait

If you want to learn more

Places you can find images with copyrights that allow their reuse

Creative Commons open license search engine, allows you to search for Google, Flickr, Yahoo, and other images with Creative Commons licenses.
The WikiMedia Commons, contains images with open licenses freely available for your use.
U.S.government photos in the public domain and available for use. (Be sure and read the license information as a very small number of these may not be in the public domain.)

Copyright Crash Course

Crash Course Tutorial

The Crash Course Tutorial is available for faculty to use to learn Copyright basics, especially in the distance learning context.

The contents of the Copyright Crash Course are licensed under a Creative Commons License.

Image formatting options

Wikipedia picture tutorial, everything you need to know to place, format, and describe images.
The syntax for placing an image in your document is [[image:Filename|options]].

Where the "options" deal with placement, an optional "frame", and/or an optional caption. The following is the very basics needed. You can go much further with image styling if you want.

Image commands:

left, right, center - The default is left if you don't specify placement.

frame - this will place a frame around your image. The default is for no frame.

caption - any other text that isn't "frame", "left", "center", or "right" is text that will be used in a caption.

###px - to specify the sizing of the image. For the most part you don't want to resize your image unless it's a very minor change in size. It's better to size the image in an outside graphics program and upload it.

thumb - will place a thumbnail size version of the image on your page.

To specify these options you place a pipe character "|" in the image mark-up. So to place an image on the right, have a frame placed around it, and to add a caption your image mark-up would like the following: [[image:Image_filename.jpg|right|frame|This is my image.]]

Watching: An Article Start to Finish: Using Images in MediaWiki

An Article Start to Finish: Using Images in MediaWiki

Contents

Learning Objectives

Introduction to the Lesson

Demonstrations and Learning Activities

Locating an Image

Hands-on Activity

Hands-on Activity

Linking an Image

Hands-on Activity

Adding an Image to Your User Page and Categorizing

Hands-on Activity

If you want to learn more

Places you can find images with copyrights that allow their reuse

Copyright Crash Course

Image formatting options