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)
PDFs
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="https://www.google.com/images/srpr/logo11w.png" 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="https://www.google.com/images/srpr/logo11w.png" target="_blank"><img src="https://www.google.com/images/srpr/logo11w.png" height="50" width="150" alt="altText"/></a>
PDFs
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="https://www.gstatic.com/policies/terms/pdf/20220105/it7r24p9/google_terms_of_service_en_us.pdf" 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.
Sizing
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="https://www.google.com/images/srpr/logo11w.png" 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>