Adding IMAGES, DOCUMENTS or VIDEO clips

9th August 2017
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?

  1. The purpose of the page explained
  2. Groundrules for embedding material
  3. Link to material on embedding IMAGES
  4. A video introduction to embedding VIDEO
  5. 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!


3. EMBEDDING IMAGES

See Embedding Images in your TiddlyManual



4.Video introducing "how to embed VIDEO":



5. Understanding how it works

First, this is called a Mash-Up - what is that?!

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).

(c) Pictures

See Embedding Images in your TiddlyManual. The easiest place to upload to is to TiddlySpace itself. We also use Google Picasa or Flickr to host pictures (but increasingly the IT red tape in NHS or Social care settings blocks these).

(d) Documents

We use Google Docs or the more recent Google Drive. Annoyingly, some dinosaur organisations (mentioning no names) still block Google Documents via their IT departments - this kind of problem will surely die off eventually... See Organisational support for the technology to run TiddlyManuals for advice on how to tackle this nuisance.

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.

(e) For PowerPoint slides

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:

<html><div align="center"><iframe src="PASTE_YOUR_WEBPAGE_URL_HERE" frameborder="0" width="100%" height="600"></iframe></div></html>

    1. Now go to the web-page you want to embed in your manual page
    2. Copy the web address ("URL") for that web-page
    3. 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)
    4. 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:


  1. 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.
  2. 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.