Multimedia Elements

What Are These Elements?

The Multimedia Elements group contains a number of tools for displaying simple or complex media. Instructions for each element are linked below, and examples of each can be found further down this page.
  • Audio / video element
    A single element that can contain a video (or an audio-only file if that's what you have). If it is a video, you can have it embedded (i.e., it takes the full width of the page, and is played right in the page) or it can be a thumbnail (so when a visitor clicks the thumbnail, they're taken to a page where the video plays). If it is an audio file only, a big "play" button automatically shows up in the spot where the video would otherwise show.
  • Image comparison element
    A slider tool that lets the user compare two images
  • Image with caption & credit element
    A simple tool that displays an image the full width of the page
  • Webcam
    Share a non-streaming webcam. (Streaming cameras are supported too, but with a few extra steps).
  • Panorama
    Embed a 360º panorama on a page.
  • Photo gallery
    Embed one or more photo galleries, or albums, on a page in your site. This element calls upon albums that exist in NPGallery.

Audio/Video Element

Below is an example of the audio/video element. A few things to note:
  • You can upload just an audio file (e.g., an .mp3) if you want. The element will simply show a big play button to illustrate that it's audio-only.
  • The element can show a 360º video.
  • Most common video file types are accepted. A best practice is to upload an mp4 that you have compressed as much as possible without sacrificing video quality.
  • The element will re-encode your video to offer a few different quality versions to users, which optimizes playback for slow or fast connections.
  • Accessibility note: All videos must be captioned and audio-described. Closed captions are preferred (e.g., the style that the user can toggle on or off). Audio-only files must have an accompanying transcript. This is a legal requirement. Learn more about digital accessibility (NPS only) if you're unfamiliar with these requirements.
Visit our keyboard shortcuts docs for details
Duration:
21 minutes, 31 seconds

Denali's canine rangers connect the past to the present. Sled dogs and rangers continue to work together to protect the wilderness of the park as they have since the 1920s.


Audio / video element instructions (NPS only) | Return to top of the page

Image Comparison Element

Below is an example of the image comparison element. It uses a slider to let the end user compare two images. These images should ideally be of the exact same perspective / view (or as close as possible). The element works well when showing the effects of change over time (climate, fire regime, human development, etc).

An Optional Header Can Go Here

aerial view of a river with sparse forests on either side aerial view of a river with sparse forests on either side

Left image
Aerial view of a river in Denali, 1952. Note the relatively limited shrub and tree cover on either side of the river.
Credit: NPS Photo

Right image
Aerial view of a river in Denali, 2004. Note the increased shrub and tree vegetation on either side of the river.
Credit: NPS Photo

An optional description can go here. Typical styling tools (header, linking, etc) are available. 

Image comparison element instructions (NPS only) | Return to top of the page

Image with Caption & Credit Element

The example below is an element that lets an image flow the full width of the page (960 pixels). Note that you can do this with an image in a "text wrapped around image (image optional)" element, too.
female sled dog in a dog house nursing 7 puppies
This is the image caption field. Use this to give extra context to your image. For example: "Denali breeds one female sled dog each year. In August 2017, Clove gave birth to seven puppies that will grow up way too fast."

This is the image credit field. A common convention for NPS photos is to credit them as: "NPS Photo." You may choose to acknowledge the photographer, too (e.g., NPS Photo / Kent Miller). Never use photos for which you lack the use rights!

Image with caption & credit element instructions (NPS only) | Return to top of the page

Webcam Link Element

Below is an example of the webcam link element. This element allows you to display a non-streaming webcam feed (i.e., it supports cameras that take an image every 10 seconds, or some other interval).

For more details, read the webcam element instructions (NPS only). Briefly, to set up a non-streaming camera:
  1. Choose your camera model.
    Great cameras can be found for less than $1,000 (many are less than $100).
  2. Set up the camera.
    With help from your local IT specialist(s), set up your camera on the government network, if possible. A remote camera that cannot plug into the government network may be trickier to set up. Your IT specialist will need to assign the camera an IP address and may need to adjust some other network settings to ensure that the camera is working.
  3. Configure the camera.
    With help from the Web Services Division (WSD), configure your camera to send its image to the FTP address provided to you by WSD. Check that your camera is functioning properly (i.e. that it is able to save its regularly-taken image to the proper FTP folder).
  4. Configure the webcam element.
    The easiest part of this whole process is to put a webcam element on an appropriate page, and configure it with the FTP address from step 3. This allows the webcam element to pull the image from the FTP folder into your website.
Alpine Tundra preview image
Webcam

Alpine Tundra

Have you ever wanted to check conditions for hiking, skiing, and other outdoor activities along the Denali Park Road corridor west of Park Headquarters? A new Alpine Tundra webcam, perched high atop a shoulder of Mount Healy along the park’s Outer Range, offers a westward perspective for several miles beyond the entrance area. Snow and extreme conditions may obscure the view at times. The image is set to refresh several times each minute.

View Webcam

Webcam element instructions (NPS only) | Return to top of the page

Panoramic Image Element


This element displays a panorama uploaded to NPGallery. The panoramic can be a spherical 360º image, or just a very large landscape-oriented photo (although some minor distortion may occur if it is not a true spherical pano). (Note: 360º video is supported by the standard audio/video element, which is described above. Contact the Web Services Division via their issue tracker if you have a 360º video and need help uploading it).
Panoramic Image Instructions (NPS only)

Photo Gallery

Photo galleries can be shown on most page types in the content management system. Galleries actually reside in the NPS digital asset management system, known as NPGallery.

Authors create and maintain albums, or galleries, in the NPGallery site. The NPGallery Element then lets authors display those albums on any page. The NPGallery Element can show just one photo gallery, or it can show several.
Photo gallery instructions (NPS-only)

< Back to the element gallery index

Last updated: April 8, 2019

Tools