Follow

Guide To: Hosting & Adding Images and Gifs to Your Job or Instructions

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.

Screenshot_2023-04-27_at_1.12.07_PM.png

The graphical editor does not support embedding images or gifs into your job design, you will need to use the code editor (see below).

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:  SDA is supported 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.


Was this article helpful?
6 out of 10 found this helpful


Have more questions? Submit a request
Powered by Zendesk