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.

Embedding Images and .gifs

• You can add an image to the Instructions or CML Code Editor, in the same way, using the following HTML tag: 

<img src="EXAMPLE_URL_PATH"/> 

• An example using the Google logo would be: 

<img src="https://www.google.com/images/srpr/logo11w.png"/> 

• 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. 
• 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"/>

<img src="https://www.google.com/images/srpr/logo11w.png"  height="40%" width="50%"/>

Embedding Images 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"/></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.
•  However, if that is not an option, there are many good free image hosting services available (although require an account).
  • Photobucket.com
  • Flickr.com
  • Imgur.com
  • SlickPic.com
• All the above services are great options, however, we recommend Imgur.com, as their interface is very user friendly and their service allows quick and easy image upload.

1. Open Imgur.com
2. Drag the file into the window
3. Click Upload!
4. Copy the direct link
5. Paste the direct link into the <img src="url"> tag