Please note that the editing function is undergoing some development work so some parts of these instructions may no longer be correct. Apologies for the inconvenience and we hope to have these updated soon.
What's here?
The purpose of the page explained
Groundrules for embedding material
Link to material on embedding IMAGES
A video introduction to embedding VIDEO
Where to store (or "host") material for embedding
1. Purpose of this page?
Your TiddlyManual is a "multimedia" site - that means there are Videos and Slides and Audio clips embedded in the pages. We assume this material enriches the content and improves the likelihood that it will influence practice in positive ways.
We want local teams to Manualize their own work - adding documentation of local adaptations, improvements and attunements that will better support their local team to do the work it does. There is more basic information on how to Edit these Wikis. The point of this page is to show you how to add "the fancy stuff" like video clips, audio clips, pictures, or downloadable documents.
This is very easy... honest... try it!
2. Groundrules:
N.B. - NO CONFIDENTIAL CLIENT VIDEO MATERIAL SHOULD EVER BE UPLOADED TO AN ONLINE SOURCE, AND THE STREAMING VIDEO USED IN THE AMBIT MANUAL INVOLVING ROLE-PLAYS SHOULD ONLY BE DISPLAYED WITH APROPRIATE CONSENT. TEAMS ARE RESPONSIBLE FOR THE MATERIAL THAT THEY UPLOAD THEMSELVES, NOT THE AMBIT PROJECT!
This is what geeks programmers refer to when a single website actually uses functions and pieces of information that are drawn from different places across the internet - the mash-up brings these disparate elements together to produce something quite specific and 'fit-for-purpose'. TiddlyManuals work like this. Video, audio, pictures and documents can all be stored in different online places, but can be accessed through (or "embedded within") the one tiddlymanual.
6.Where/how to store (or "host") material for embedding?
Where can you upload material online, so that you can embed it and display it in your manual?
Here are a few examples of "hosting resources" that are in use in the manual - all of them are FREE - you just have to register to set up an account:
(a) Video
We mainly use YouTube but another good hosting site is Vimeo. You will need to find the "EMBED" code from the website, and use that pasted into place within this extra bit of code:
<html>ADD_YOUR_EMBED_CODE_HERE</html>
(b) Audio
A good site is Soundcloud - you can upload Mp3 tracks (lots of musicians use this site, but it works equally well for the spoken voice) and then "embed" the player for that track in your page (as above).
In Google docs you open the document, look for the "Share" button (top right of the screen) and then select Publish/Embed, and that will offer you a range of options so for slides you can choose to automatically start a slide show running and looping every time the site is accessed, etc (see Thinking Together for an example of this). Google docs offers a bit of code, which you copy.
You can display slides so that others can see them as a slideshow, or can DOWNLOAD them from your page in your manual
You can do this via Google Docs, Google Drive, or one of many other "web-hosting" services for PowerPoint slides
Alternatively, you can actually save individual PowerPoint slides as JPEG files (essentially these are just digital photos) and then upload these to a photo hosting site (see just above for examples) and mount them in your page as a straightforwards picture (simpler, nicer "feel", but a bit fiddlier if you have loads of pictures! - the photo above is actually taken from a PowerPoint slide that was saved as a JPEG.)
By the way, ancient versions of PowerPoint make it a bit more complicated to save slides as JPEGs, but modern versions make it easy... (open the slide, click "Save as", then select what kind of file (JPEG) you want to save it as from the drop-down list that appears beneath all the file locations you could save it into...
EMBEDDING CODE
Find the "Embed code" from the site where you are hosting the image/document/etc
Slap this embed code INSIDE the code given below (cut and paste it from here):
<html>ADD_YOUR_EMBED_CODE_HERE</html>
Do note the little forwards slash that must sit before the second "html"... it is fiddly, but once you know it, simple!
iFRAMES - a whole "web-page-within-a-page"!
An iFrame simply opens a "port-hole" onto another part of the web from within a Tiddler. If you want to 'embed' a whole web-page inside a page of your manual, you can easily make one of these 'windows', using a similar little bit of code (called an "iFrame"). Here is the code that you need to this... you can cut and paste the code for this from here:
Now go to the web-page you want to embed in your manual page
Copy the web address ("URL") for that web-page
Go back to the Tiddler you are editing, and paste the web-page URL just where the code says "PASTE_YOUR_WEBPAGE_URL_HERE" (be sure to leave the speech marks in place so that they bracket your URL)
Done! Click "Done" (or the tick) on your Tiddler page - top right, and the page will switch back to ordinary viewing mode... if you got it right, you'll see your other web-page within that one. Here is an example (probably the most boring blog in the blogosphere):
Notes:
If you are viewing a downloaded copy of the manual then it will still fish out the web-based content so long as your computer is hooked up to the internet, but if you are not online, obviously no image will show.
If you are wanting to put a bit of YouTube video up, you will see on the You Tube page that there are actually two bits of code displayed that can be cut and pasted - one is titled "URL" - this is what you would use for the iFrame technique, the other is titled "Embed" and is a neater way of doing things (see "embedding code" above - but essentially, just sandwich the Youtube embed code in between these two extra bits of code: <html> and </html> (again, do note that there is an extra "forward slash" in the second of these.) If you use an "Embed" code then you will ONLY get the video image in its own little "player", rather than the whole You Tube page - much neater.