Authoring Tips: Images and other multimedia

It is possible to create a module that is nothing but text. However, we find that many people have images, examples, documents, and more that they want to have interspersed in the text; after all: "a picture is worth 1,000 words". And so I'll blog (in three parts) about how to utilize multimedia in Connexions. This post will introduce you to the <media> tag. In the following weeks will will discuss popular sizing requests (like thumbnail images) and then a very popular request: embedding videos or powerpoints.

You will notice that the <media> tag is not an option in the drop-down "insert" menu on Edit-in-Place. You need to manually add in <media> code. For that it is handy to have the <media> help reference handy (cnx.org/eip-help/media) so that you can copy over the example code and change what is needed. The <media> tag allows you to easily include audio, image, flash, video, java-applet, and labview files right in the content of your module, as well as any other type of file (for download only). Let's use images as an example.

Upload the image

Click on the green "Files" tab just under the orange title of the module. There you can click on the blue "Add an image/included file" button to add any files you want to include in your module. Be sure to note the file name for later.

Use <media> to include the image

Click on the green "Edit" tab to return to Edit-in-Place. Open the element you want to add media to for editing (or insert a blank paragraph where you can add the code for your media):

The code to add an image looks like this:

<media id="a-unique-id" alt="Describe the image.">
  <image mime-type="image/jpeg" src="YourFileName.jpg" />
</media>

The mime-type of the media file depends on the filename extension. If your image is not saved as a JPEG like in this example, you can look up the mime-type here.