Overview
Various data types (images, gifs, videos, or audio clips) have the additional benefit of saving you space within your job design and explaining processes more effectively than words. This article explains how to incorporate images and gifs into your instructions to easily explain complex tasks, procedures, or simply provide examples.
Instructional Editor
Within the instructional editor UI you will see the “Insert Image“ Icon, which let’s you upload an image directly to your job’s instructions. You can either use an image link or a locally stored image for upload.
Code Editor
You can embed images and gifs into both your job design and instructions by using the following HTML Tag:
<img src="EXAMPLE_URL_PATH" alt="altText"/>
- An example using the Google logo would be:
<img src="https://www.google.com/images/srpr/logo11w.png" alt="altText"/>
-
By default, the image will display its actual size or adjust to the size of the
<div>it is in. - You can alter this behavior by specifying a height and width attribute (in pixels or percentage) within the tag itself or within the CSS Editor.
- Please note that specifying a size of an image greater than its default size will blur the image.
<img src="https://www.google.com/images/srpr/logo11w.png" height="400" width="1200" alt="altText"/>
<img src="https://www.google.com/images/srpr/logo11w.png" height="40%" width="50%" alt="altText"/>
Embedding Image Thumbnails
-
Alternatively, you may desire a small image thumbnail that links to the full version of the image due to space constraints. To achieve this, simply wrap the
<img/>tag in a hyperlink tag<a></a>with the following attributes: -
href="URL"- The URL you are linking to. -
target="_blank"- This commands the link to 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>
Hosting Images and .gifs
In the instances you do not have access to an image’s URL, you will be required to host the picture on an image hosting service. As a best practice, we recommend hosting the images on your private or company servers such as Amazon S3.
Note: If using S3 or if referencing data from another cloud storage provider, ensure that the data is publicly accessible as we currently do not support SDA in the instructions section.
However, if that is not an option, there are many good free image hosting services available (although require an account).
After hosting, paste the direct link into the <img src="url"> tag.
