Follow

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

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:

<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 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:

  • Photobucket.com
  • Flickr.com
  • Imgur.com
  • SlickPic.com

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.

 

  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

Was this article helpful?
1 out of 1 found this helpful


Have more questions? Submit a request
Powered by Zendesk