7. Media element
Media blocks allow articles to have images, videos and audio.
Multimedia is a large part of why people use the internet, with images being the principal form used. Video can be useful for attracting attention, so Smallsite Design allows for introductory videos, but video, and audio to a lesser degree, take a up lot of storage and bandwidth, which can tax the servers hosting small sites, resulting in buffering or other glitches. They need dedicated high-bandwidth server infrastructure like that provided by YouTube, Vimeo or SoundCloud, so such content is better provided on them and linked to.
Smallsite Design does not allow content embedded from other sites so that those other sites cannot track the site's visitors, which happens even if the media is not played. Unless uploaded to the site, video and audio must be hosted elsewhere and linked to. Smallsite Design also does not allow media to automatically play, so readers are not taken by surprise.
Like most blocks, media blocks require an introduction to guide readers as to what to expect from or look for in the media item. If the media file has an Owner specified, that will be displayed below the file near the start, and be a link if the file has a Page article or URL.
The sequence element can be used as an alternative to many multimedia presentations because they can result in substantial reductions in storage size and bandwidth. They are suitable replacements for computer instructional videos and meditations. Their advantages are that they are hosted on the site and can be edited by the site owner, even if they had help to create them.
Figureβ³
A figure element can show an image, and an optional quote.
Most image formats used in websites are able to be displayed in almost all browsers, unlike with video and audio Files, so as long as the image file has an entry in MIME types matching its extension, it can be used in a figure.
The figure's introduction will be limited to the width of its image. If in the body of a page, preferably make the introduction be narrower than the image. Because of their small size, icons cannot be used with a figure. Use the icon element to display them inline in a Rich text block.
A quote can be added for display below the image, though since it is quoted, it is only relevant if the image is a picture of the person who said or wrote the quote. It doesn't necessarily have to be original, but be something the person is emphatic about or known for saying. Even better, if the image has a Page specified, the quote should be displayed in that page and indicate the context in which it was said or written.
Linking to figuresβ³
A table or list can be linked to a figure to provide descriptions and other information for its labels.
A table or list and a figure that share the same Prefix field are linked, as long as there are Labels defined for the figure and the table has Both for its Heading and Alphabetically for its Numbering, or the list has a Character of Alphabetic. The numbers of Labels and body rows don't have to be the same, though it would be odd to have labels without corresponding table rows or list items. Once linked, clicking on the label letter will jump to the corresponding table row or list item, and vice-versa. If a figure is linked to, no other table or list can be linked to it.
Some recommendations are:
- a.For a table, make the side heading column heading be a key word in the introduction to the figure. For example, if the heading is Area, a suitable introduction is The principal areas of the screen are:
- b.The same introduction can be used for the table or list, but if it is immediately after the figure, a simple where: will suffice. Note the lack of capitalisation so that it is taken as a flow-on.
This linking allows a figure to be in an Aside while the table or list can be in the body of the article. That does imply that the figure is not important for article continuity which is the normal implication of aside contents, so a properly worded table introduction should still be able to be understood if the figure is ignored. See the Procedure article for an example.
When a figure and the immediately following table or list have the same Prefix, the space between them will be reduced to indicate they are to be viewed as linked, such as in the Top of the page section of Common page elements, which also shows the use of the where introduction for the table following the figure.
Filesβ³
Audio and video elements may require multiple file types to enable a wide spectrum of site visitors to see or hear them.
Like all files, there can be a variant for each locale for media as well, but because not all the codecs that enable playback of video and audio files are available on all peoples' computers, files with each format may be required so that most people have a chance of watching or listening to their content. Now that the mp3 audio format is out of patent and free to use, a single file can be used for audio across all platforms, though it is not as compact a format as more recent ones. While mp4 is a fairly well known video format, it really is a container that might use different codecs for audio and video on different platforms.
This means that multiple files might be needed for audio or video. A browser will try each file from the first until it finds one it can play. In Smallsite Design, each file extension corresponds to a single MIME type, as specified in the MIME types section of the Settings page. There must be an entry in that table for a file to play within the page, otherwise it can only be downloaded, if set for embedding. As time goes on, new file formats will become popular, requiring additions to that table.
.svg files are not allowed because they have security risks due to allowing scripts, external fonts and external links. While theoretically these sub-elements could be filtered out on import, mostly that would result in destroying the file's functionality as such sub-elements are incorporated to provide it. The Diagram element provides some basic drawing functionality, but it is not scalable like images are. Otherwise, render the file as raster for use in a Figure element.