Guide to: Hosting & Adding Media to Instructions

Various data types (images, gifs, audio, video, PDF) can be added to instructions to save space or simply demonstrate complexity more effectively and efficiently than words. 

The PDF upload feature, for example, streamlines the process of including externally developed content within your job instructions, saving you valuable time. This feature eliminates the manual effort you would tradtionally invest in copying and pasting pre-written and pre-formatted content into ADAP jobs. Additionally PDFs can serve as supporting documentation, meaning your in-job instructions can contain the main points you want contributors to focus on, while the detail is contained in PDF.

This article explains how to incorporate media to your instructions via the Instructional Editor (Images & PDFs) and/or the Code Editor (all media).

Uploading and Hosting Considerations

Before you start, consider whether you will be uploading assets directly to the instructions or whether you'll be providing links to the media files instead.

  • Upload is only available for Images & PDF, and only via the Instructional Editor UI
    • Uploaded assets will be by default stored on a secure S3 bucket (via CDS)
  • Links can be publicly available, or hosted on your company storage provider such as Amazon S3 (recommended)
    • SDA integration is required for referencing your privately hosted Images & PDFs. If the links are public, then you do not need to add your SDA provider

Instructional Editor

Images & GIFs

In the edit panel of the Instructional Editor you will find the "Insert Image" icon. Click here to upload an image or provide a link.

Fig. 1: Upload a file

Fig.2: Provide a link (and, optionally, SDA provider/secure storage name)


Within the Instructional Editor, the "Upload PDF File" icon is located in the edit panel. Click here to upload your PDF or provide a link.

Fig. 3: Upload a PDF

Fig. 4: Provide a link (and, optionally, the SDA provider/secure storage name)


Code Editor

Images & GIFs

You can embed links to images and gifs into your instructions using the following HTML tag:

<img src="EXAMPLE_URL_PATH" alt="altText" />

For example:

<img src="" alt="altText"/
  • Alternatively, if you have space constraints, you may wish to display an image thumbnail. To achieve this, wrap the <img> tag in a hyperlink tag (<a></a>) with the following attributes:
    • href="URL" - the URL you are linking to
    • target="_blank" - to make the link open in a separate window
<a href="" target="_blank"><img src="" height="50" width="150" alt="altText"/></a>


To embed links to public or hosted PDFs, use the following HTML tag:

<iframe src="EXAMPLE_URL_PATH" width="100%" height="800px"></iframe>

For example:

<iframe src="" width="100%" height="800px"></iframe>

If you are using SDA integration, paste the link and the secure storage name into the tag:

<iframe src="{{ url | secure: 'storageCmlName' }}">

Audio & Video

Audio & video can be embedded into your instructions via the Code Editor.

Code Editor

To embed audio or video use the following HTML tags:

  • <audio controls="controls" style="width: 50%;" src="audio_url" type="audio/mp3"></audio>
  • <video width="320" height="240" controls="true"> <source src="video_url" type="video/mp4"/>   Your browser does not support the video tag. </video>
    • We recommend .mp4 format for videos
    • If the browser does not support the video tag, text will appear instead.


By default the rendered media asset will display its actual size or adjust to the size of the <div> it is in. 

  • You can alter this behavior by specifying height & width attributes (in pixels or percentages) within the tag or within the CSS editor. Note that increases in the size like this may result in blurring. Example below of image and video tags with sizing attributes.
<img src="" height="400" width="1200" alt="altText"/>
<video width="320" height="240" controls="true"> <source src="video_url" type="video/mp4"/>   Your browser does not support the video tag. </video>

Was this article helpful?
4 out of 5 found this helpful

Have more questions? Submit a request
Powered by Zendesk