Images, Flash, Videos and Audio

Too much text makes for a dull read. Spice up your pages by adding some multimedia...

Overview

The days of text-only websites are long gone. These days it's not enough to simply place page after page of text on your site, you've got to make it look nice and find more concise ways of delivering information. That's where multimedia comes in!

Multimedia comes in all shapes and sizes (and sounds!) and can be stored both on your own site or elsewhere on the Internet. This tutorial shows how to include various forms of multimedia, taken from various locations on the Internet.

Choosing a Location

As we've mentioned above, media can be pulled in from a wide range of locations. In order to not repeat ourselves in the following sections, we'll take a brief look at the various locations for storing media files and how to use them within your content.

Page / News Attachments

All Pages and [USERGUIDE:news] items within your site have an "[USERGUIDE:Attachments]" feature. You can even add attachments to your [USERGUIDE:User Profile], for example a picture of yourself.

To display an attachment from the current page, etc., simply put it's file name in exclamation marks:

!toddler.png!

Which results in:

Attachments Elsewhere

If you want to use an attachment for another page or news item ¹ , specify the page name followed by a caret ("^") and then the attachment name as shown in the example below:

!gallery macro^violin.jpg!

This will take the file called "violin.jpg" from the "gallery macro" page within the same space as the page containing the link:

If you want to use an attachment in a different space, you need to include both the Space "Key" and the page title (or news link, etc) as shown in the example below:

!ADAPTAVIST:Home^cubes.png!

Which results in:

Remember that when you are using attachments from elsewhere, the person viewing your page must also have access to view the location where the attachment is stored.

Missing Files

If the file you try to display is not found (either it doesn't exist, or you've mistyped the filename, etc) then you'll get something like this:

Unable to render embedded object: File (non-existant.file) not found.

Files from Other Servers

To display an image from a different server ² , specify the full URL as shown in the example below:

!http://adaptavist.com/adaptavist.gif!

Which results in:

Note: For security reasons, some media formats cannot be used if they are on remote servers as shown in the "Remote" column in the table below.

Footnotes

Reference	Notes
1	Before pulling attachments from other locations, please read our tutorial on Linking to Attachments for guidance.
2	Make sure you get permission from the owner of the server first.

Media Formats

You can display several formats of image:

Format	Media	File Extension(s)	Notes	Remote
Joint Picture Expert Group (JPEG)	Pictures	.jpg .jpeg .jpe	A very popular file format for displaying photographs or other images with lots of complex detail and colours.
Grpahics Interchange Format (GIF)	Graphics and Animations	.gif	A very popular file format for displaying images with 256 colours or less. GIF images are best used for pictures that contain large areas of the same colour such as charts, etc. GIF files can also contain transparent regions (so you don't get ugly white edges on a darker background, etc) and simple animations.
Portable Network Graphic (PNG)	Pictures and Graphics	.png	This is a more modern equivalent of GIF images, however it doesn't support animations. The biggest benefits of PNG files are that they can contain millions of colours and they can have variable transparency 3 .
Windows Bitmap (BMP)	Pictures and Graphics	.bmp	This file format is normally only supported on computres running the Windows Operating System. We strongly advise against using this media format because the files are usually HUGE and will take a long time to download.
QuickTime	Pictures, Graphics, Animations, Audio, Video	.mov	A very flexible format that can contain multiple types of media. Microsoft Windows users will usually have to download a plugin to view this type of media.
Windows Media	Audio, Video	.wma, .wmv	This format is most commonly used for audio and video files. Microsoft Windows users may need to upgrade to a more recent version of Windows Media depending on the type of file being played.
Real Media	Audio, Video, Animations	.ram .rm	Users will have to download the Real Player (or similar) to view this type of media.
MP3	Audio	.mp3	MP3 is by far the most popular media format for music and is also widely used for recorded speech.
Flash	Pictures, Graphics, Animations, Audio, Video, Games, etc.	.swf	Flash is by far the most widely supported rich media format across different operating systems and web browsers. It can display everything from simple text to interactive content 4 and even games 5 . The flash player is installed on most computers, but if a newer version is required it will usually automatically download and install itself.

Footnotes

Reference	Notes
3	Microsoft Internet Explorer, prior to version 7, has trouble with the transparent regions in PNG files. However, if you are using the Builder theme the transparency will work in all versions of Internet Explorer from version 5.5 upwards.
4	See our World Domination Map for an example of Flash.
5	See the sudoku-flash macro for an example of a game.

Media Formatting Options

There are various formatting options, dependant on the type of media you are using.

To specify a single option, such as setting the alignment for an image, use the following notation:

!toddler.png|align=right!

If you want to specify several options, separate them with commas as shown below:

!toddler.png|thumbnail,align=right,vspace=4px!

Click on the links below for more details on options for specific media formats:

• Image Options — This tutorial covers the various additional options that can be used when displaying JPEG, GIF and PNG files...

Hints and Tips

Frequently Asked Questions