Child pages
  • Adding Multimedia
Skip to end of metadata
Go to start of metadata

Types of Media

You can embed lots of different types of media into a Wiki page, including images and symbols, as well as more complicated objects such as videos and calendars.

 

This page is incomplete, but you can help! Please edit this page so that others can use it.

Widgets

A widget is a chunk of an application from outside of the Wiki, displayed on a Wiki page. By embedding a widget, you can add a YouTube video to a page, or a Twitter feed, or many more. For a more complete list, see the official documentation.

Calendars

You can use widgets to embed a Google calendar into the Wiki, like this:

To do so you need to find out the URL of the calendar, which will be a long string of letters, numbers and symbols.

The simplest way to get the calendar's URL is to go to your Google calendar, find the calendar you want to embed in the list, move your mouse over it and click the down-arrow that appears. From the list of options that pop-up, select 'Calendar settings'. On the settings page there is a section labelled 'Calendar Address'; click on the blue 'HTML' button under this section, and copy the long link that appears; it will look something like this:

http://www.google.com/calendar/embed?src=york.ac.uk_baauqv5htgkf5uu6kt0s503e78%40group.calendar.google.com&ctz=Europe/London

This is the "Widget URL" that you will use. Now go to the Wiki page you want to embed the calendar into, and begin editing it. At the place in the document you want to embed the calendar, click the 'insert' button in the menu, and select 'Other Macros'. At the pop-up, select the "External Content" section, and then click on "Widget Connector".

In the next page, paste the Widget URL into the text box, and click the 'preview' button. If all goes well, your calendar will appear in the preview pane. Now click the 'Insert' button, and save the page, or continue editing.

Note

The calendar will not show up when editing the page; it will look something like:

This is intentional, so that it doesn't get in the way while you're editing the page; to edit or delete the widget, click on the box and select one of the buttons that appears.

If you want to see how it will look, simply preview the page by clicking the Preview button in the bottom right of the editing page.

Customising the calendar

Using a slightly more involved method, you can customise the embedded calendar to display multiple calendars at once, change the displayed colour, or change the default view:

To make this work, go to the calendar settings page, as before (if you want to display more than one calendar, just select one of the ones you want). This time, go to the 'Embed This Calendar' section and click the link 'Customise the colour, size and other options'. This brings up a window with lots of options for formatting the calendar, which you can change and view the outcome as you go.

Once you're happy with how it looks, go to the section marked "Copy and paste the HTML below...". If you were embedding the calendar into your own web page you could just copy and paste the whole lot, but to use it in the Wiki we need to do a little more work. You need to select the contents of the 'src' attribute of the iframe element: basically, select everything within the first set of ""s. As a guide, it will start with "http" and probably end with the word "London" (the time zone). For example:

https://www.google.com/calendar/embed?showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=WEEK&height=500&wkst=2&bgcolor=%23FFFFFF&src=york.ac.uk_baauqv5htgkf5uu6kt0s503e78%40group.calendar.google.com&color=%230F4B38&ctz=Europe%2FLondon

This is almost all, but there is one last thing to do before we can paste this into the Widget URL box: we need to change every instance of & into &.

Why?

The ampersand (&) is a special character in HTML, so it has to be encoded as "&" in links. It is also a special character in URLs (like the Widget URL), but in this case we actually want it, so we need to change the "&"s back.

Just go through the string you copied and change every instance of "&" to "&". Make sure you don't miss the semicolon! Once you're done, you should have a complete Widget URL looking something like

https://www.google.com/calendar/embed?showDate=0&showPrint=0&showCalendars=0&showTz=0&mode=WEEK&height=500&wkst=2&bgcolor=%23FFFFFF&src=york.ac.uk_baauqv5htgkf5uu6kt0s503e78%40group.calendar.google.com&color=%230F4B38&ctz=Europe%2FLondon

This you can now paste into the Widget URL box, like before. Be sure to check in the Preview window that it has worked as you expected!

  • No labels

2 Comments

  1. I've attempted to insert a Widget Macro to display a Twitter Feed on the page as instructed, but as yet nothing appears once it is saved. Is there something I'm doing wrong? I've copied and pasted the Twitter user URL as it says.

  2. Daniel Mcmahon I don't seem to be able to get it working either. Given the (relatively) recent changes to the Twitter API, it might be that we are running an older version of the plugin? But I can't tell if that's the case or not. I suggest you contact IT Services to see if it is an older version, and if so if it can be upgraded.