A picture is worth a thousand words. Incorporate pictures and .gifs into your instructions to easily and quickly explain complex tasks, procedures or simply provide examples. Pictures have the additional benefit of saving you space within your job design and explaining processes better than words.
EMBEDDING PICTURES AND GIFS
You add a picture to the instructions and CML code in the same way using the following HTML tag:
An example using the google logo would be:
By default the image will take on it’s normal 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 stretching an image beyond 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%"/>
You may desire a small image thumbnail that links to the full version of the image because of space constraints. 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 tells 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>
That’s all there is to embedding an image in your code.
HOSTING PICTURES AND GIFS
You may not always have access to a picture’s url. In this case you will be required to host the picture on an image hosting service. Ideally, you host the images on your private or company servers such as Amazon S3. If that is not an option, there are many good free image hosting services available:
Most require a free account to use. However, if you are in a pinch and want a zero hassle image hosting service, you can try Imgur.com. Their interface is easy to use and their service allows you to upload images quickly.
- Open Imgur.com
- Drag the file into the window
- Click Upload!
- Copy the direct link
- Paste the direct link into the