Overview
This article explains how to incorporate images and gifs into your jobs. Please see this article for information on including media in your instructions.
You can embed images and gifs into your job design 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.