Documentation:Tech Rovers Guide/Wikis/Adding Media

From UBC Wiki
Jump to: navigation, search

Media can be added to a wiki page in two ways:

  1. If the media is on your computer (e.g. documents), upload it to the UBC Wiki;
  2. If the media is hosted elsewhere (e.g. YouTube), embed the media using widgets.

This module is divided into two main sections based on the two methods mentioned above.

Files on Your Computer

The poster above is a short tutorial on the copyright requirements on the UBC Wiki. (Click to Enlarge)

Any file upload to the UBC Wiki needs to have their copyright status confirmed. Upload only files that you or the instructor own's, files that are openly licensed, and files that you have permission to share.

For more information, see the image on the right or visit http://copyright.ubc.ca.

Uploading Files

  1. Prepare the file for upload. Make sure the file is exactly as you want it. The file name should only contain alpha numeric characters, underscores and hyphens.
  2. In the sidebar, under “tools”, click “Upload file.”
    The Upload file link is under Toolbox on the left-hand side menu.
  3. Click Next at the bottom of the page after browsing the short comic explaining what kinds of copyright permissions your files should have.
  4. Click “Select a media file to upload” to locate the file on your computer.
  5. Click Add another file to upload multiple files or click Upload to upload the file(s).
  6. Click Continue
  7. Choose the appropriate copyright status of the file.
    Note:
    • Choose the first option if you created the file. You will have give it a Creative Commons/Public Domain License.
    • Choose the 2nd option if it's a file created by somebody else. You will be asked to provide the source, author's name, and what kind of license does it have.
    • If you don't know the copyright status, you have the option of cancelling the upload.
  8. Provide a description of the file.
  9. Click Next at the bottom-right corner of the page.

After you've uploaded a file, you can use it in an article by copying the text under To use the file in a wiki and pasting it into your wiki page.

The following sections go into detail on how to add specific file types to a wiki page.

Adding an Image

For more information about adding images, see Help:Adding_Media.

External image syntax

You can embed an "external" image by simply typing the full URL of the image. For example:

http://domain.com/images/image_file.png

will display the image on screen.

Internal image syntax

After uploading the image, create a link to the image file to embed it on a page. Thus, for the below example, type in the following code into the wiki edit page of the article in which you want the image to be embedded.

Formatting Example of Wiki Code to Use Display
Adding an image [[Image:COI_model_adapted.jpg‎]] COI model adapted.jpg.

Image Options

In addition to embedding an image, you can also give it alternative text, a frame, or make it centered. There are many different options for how images are displayed. The full syntax for displaying an image is:

[[File:file name.extension|options|caption]]

Choose to have none or multiple options from the list below:

  • border
  • frameless
  • frame
  • thumb or thumbnail This controls how the rendered image is formatted and embedded in the rest of the page.

These options control how the image is formatted and embedded in the rest of the page. Each option should be separated by pipes (|).

Examples

Formatting Example of Wiki Code to use Display
Regular Image with a caption [[File:File:ExampleImage.jpg|Caption text that shows in mouse over and if image does not load.]] Caption text that shows in mouse over and if image does not load.
Image with Frame [[File:ExampleImage.jpg|frame|Caption: This is an example image]]
Caption: This is an example image
Thumbnail Image [[File:ExampleImage.jpg|thumb|CCaption: This is an example image]]
Caption: This is an example image
  • Note: Images without a frame automatically align left, while images with a frame automatically align right.

Adding Documents and PDFs

Use the following wiki codes when adding documents and PDFs to your wiki page.

Formatting Example of Wiki Code to Use Display
Direct pdf link [[Media:TagInstitute2009.pdf ]] Media:TagInstitute2009.pdf‎.
Direct pdf link embedded in a word or phrase [[Media:TagInstitute2009.pdf | This is a link to a PDF]] This is a link to a PDF‎.
Link to the file page of the pdf [[File:TagInstitute2009.pdf ]] File:TagInstitute2009.pdf.
External link to pdf [http://wiki.ubc.ca/images/8/8a/TagInstitute2009.pdf This is a link to a pdf] This is a link to a pdf

Externally-Hosted Media

Embedding media from other sites to the UBC Wiki works slightly different than on a platform such as WordPress or Connect where you will need to use widgets.

This section will show the most commonly used widgets. For a complete list, visit Help:Widgets.

Youtube

This widget allows you to add YouTube video player to your wiki page.

To embed YouTube videos, use the following code:

{{#widget:YouTube|id=DWef69ItVrU|height=360|width=480}}

Parameters

Parameters

  • id - video id (from the URL)
  • playlist - playlist name (starts with PL) - first clip is played (id is ignored)
  • height and width define view dimensions, 420x350 is default

Sample results


Playlist
 {{#widget:YouTube|playlist=PL6FD8256CD24CFF1F}} 

Kaltura

This widget allows you to add Kaltura video to your wiki page.

To insert this widget, use the following code:

{{#widget:Kaltura|dataurl=http://www.kaltura.com/index.php/kwidget/wid/0_dr7b6w3w/uiconf_id/1760292  |width=400}}

Parameters

  • dataurl - url to the video from the embed code (after the data=)
  • width and height define view dimensions, 400x300 is the default.

Sample result

video platformvideo managementvideo solutionsvideo player

Prezi

This widget allows you to add Prezi presentation player to your wiki page.

To insert this widget, use the following code:

{{#widget:Widget:Prezi|id=recyyolzxm3e|linktext=How to make a great Prezi}}

Parameters

  • id - Prezi id (from the URL)
  • width - define width, default is 550
  • height - define height, default is 400
  • linktext - creates link text to click on to open presentation on Prezi
  • color - define color, default is ffffff
  • bgcolor - define bgcolor, default is ffffff

Sample result

Slideshare

This widget allows you to add SlideShare slideshows to your wiki page. It replaces original SlideShare extension.

To insert this widget, use the following code:

{{#widget:SlideShare 
|doc= 
|width=
|height= 
}}

Width and height are optional, 425x348 is a default. Enter your SlideShare id in the "doc" parameter. You can find the SlideShare id when you "share" your SlideShare. There is also 'player' parameter that defaults to '2' and allows you to switch to other players.

Sample result

Google Presentations

This widget allows you to add Google Presentations to your wiki page.

To insert this widget, use the following code:

{{#widget:Google Presentation
|docid=
|size=
}}

Parameters

  • docid - docid parameter in document URL
  • size - (optional) allows you to change the size of presentation from small (388x342) to medium (555x451) or large (700x599)


Note

In order to make the Google Presentation visible on the wiki, make sure to publish it on the web. Detailed instruction on how to publish a google presentation can be seen on Publishing your Google Presentation

Sample result