KB User's Guide - Documents Tab - Inserting an Image from a URL
This document explains how to embed web images into your KB documents. We recommend that Firefox is used when performing this
KB Best Practices
It is strongly recommended that images (and files) be uploaded into the KB document attachment folder and then placed into your KB document. This method allows you more control over the image by not depending on the owner-website of your image to maintain your image and their site. Please follow the instructions here KB User's Guide - Documents Tab - Uploading Images and Other Attachments to follow the KB Best Practices.
However, if your circumstances require inserting your image from a URL, please follow the instructions below.
Inserting an Image from a URL into the Design / "What You See Is What You Get" (WYSIWYG) Editor
- In the Body field, select where you would like to insert the URL image.
- Click on (the Insert image button)
- A pop up box will appear. Under the Enter the target URL of the image field, enter the URL of the image in the text field provided. Click on OK button.
- Enter a title/description. This is also referred to as alt text which is important for web accessibility. Should you leave this field blank,
""will automatically be placed into this field to serve as a clear text alternative of the image for screen reader users.
- Click on the button to see if the image placement is to your liking.
- To further enhance the embedded web image, click on the button. A pop up box will appear called Image style properties. The web image embedded will automatically appear in the Image source field. In this box, make your selections from the following dropdown menus:
- Image source -Field autopopulates with the url of the embedded
- Alignment - choose from: left, right, texttop, absmiddle, baseline, absbottom,bottom, middle, or top.
- Horizontal space - choose from a range of 1 to 10.
- Vertical space - choose from a range of 1 to 10.
- Border width - choose from a range of 1 to 6.
- Border color - choose from a selection of colors in hexadecimal (hex) notation.
Finally, when the image is the size you desire. Click on the the Save change or Submit button. Please know that the anchor handles around the image will disappear. In the image below, the flower is smaller, anchor buttons still showing.
Linking an Image from a URL in the HTML Editor
- In the Body field, select where you would like to insert the picture.
- Click on (the Image button)
- The image HTML code will be placed in the Body field. Make sure to change the alt tag to something more description for web accessibility purposes.
- Enter the target URL, which you can find from the Attachment field, and then click OK.
- Enter a Title/Description. This is also referred to as alt text which is important for web accessibility.
- Click on to see if the image placement is to your liking.
- In the HTML editor, this line should appear
<img src="https://website/images/flower.jpg" alt="" title="">
To modify the size of the web image, update the code by adding height and width like you see here:
<img src="https://website/images/flower.jpg" alt="" title="" height="144" width="164">
I have inserted this image from a URL into my document.
If you hover your mouse over the image above, you'll see the link text,
two_birds_sand. You will also see the URL from which this image is linked in your browser (see the red circle in the image below). The red arrow in the image below is pointing to the title/ link text of the image.