Embedding Content

This is one of the most versatile tools for developing wiki content. There are many kinds of things that can be embedded, from images (photos, line art, screen clippings) and files (PDFs, Word docs, etc.) to all manner of widgets for videos to calendars to audio clips to flash animations to RSS feeds. We will look at just a couple, but you will want to explore more on your own. Of course, the purpose of your wiki will dictate just what should and should not be included. Make sure it serves your purpose.

NOTE: The last page of your handout has quick guides for adding images and files and widgets.

Images and Files

We'll start with an image. If you have one that fits your purpose, go ahead and use it. Otherwise, you can use this photo from NASA's collection of images of the Gulf oil slick:
Download the smallest (800x600) image from the NASA site.
Then use the Insert Images and Files iconInsertImageFile.png on the Editor to upload and insert the image on your wiki home page. The Images and Files window will appear:
Click the Browse button to locate the image on your computer, then the Upload button. When the image appears in the window, double-click it to insert onto your page.
The image will appear on your page along with an Image Properties window:
You can re-size the image directly using the selection handles on the corners or sides, but it is easy to distort the aspect ration of an image that way. Instead, click the plus or minus Size buttons in the Image Properties window to control the size easily. You can also specify left, center, or right alignment, add a link to the image, and add a caption in this window. Click the X to close the window or click anywhere else on the page.

Inserting a file or document works the same way using the same window except you will just see the file name enclosed by double brackets on the page. When you save the page, an image of the file type will appear with the filename as a link to download by the user. If you want to try inserting a file, you can download the Session Handout from the Navigation Menu, then insert that file onto your wiki.


In order to embed a widget, you will need the embed code for what you want to display. Copy the code -- from a YouTube video page, for example -- then click the Widget iconWidgetIcon.png on the Floating Editor to bring up the Widget window:
Select the category of widget, make your selection, and paste in the embed code. You will only see a rectangular place-holder for the widget until you Save your edit.

Widget Practice

You can embed your own widget if you have a video or some other content that fits your wiki's purpose. Otherwise, you may use the CommonCraft video, Wikis in Plain English for practice. Here's the URL in YouTube:
  • On the YouTube page, you'll find the embed code to the right of the video itself. Copy the code and return to your wiki.
  • Click the Edit button on your home page or the page where you want to embed the video.
  • Place the insert cursor where you want the video to appear.
  • Select the Widget icon on the Editor.
  • Select Video in the Widget window, then YouTube.
  • Paste the code in the field provided.
  • Click the Save button.

Widget Windows


Extension -- Discussion Threads

If your wiki would benefit from one or more discussion threads, decide whether one over-all discussion for your space or separate discussions on two or more pages would be best. If one over-all discussion is best, go into Manage Wiki to Settings and set it under Wiki Info. For your over-all discussion or at least one page-level discussion, use the Wikipedia Widget to embed your discussion on an appropriate page location. Note: If you have not yet started a discussion with an initial prompt, only the discussion headings will appear. Once you have posted a discussion prompt, it will appear where embedded and users will be able to click there to participate in the discussion instead of going to the tab at the top of the page (makes it easier to direct them to a discussion lower down on the page).

Extension -- RSS Feeds

Embedding objects in wikis allows Web 2.0 mash-ups. Here's an example: Try embedding one or more RSS feeds onto a wiki page like the one below comparing two Twitter hashtag search results. This is arranged on the page by first creating a Table (1 row, 2 columns).
[ invalid RSS feed: ]
[ invalid RSS feed: ]