KB User's Guide - Documents Tab - Insert an Image from another Website
This document explains how to embed images that reside on another website into your KB document. We recommend that Firefox is used when inserting an image as this browser provides image anchors, making resizing the image easy to adjust.
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 image owner/ website owner to maintain that image. 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 specific webs site, please follow the instructions below.
Insert an Image from another Website via the Design Editor / "What You See Is What You Get" (WYSIWYG) Mode
- Go to the KB Admin Tools and open your document in the Design editor, or what we call, the WYSIWYG Mode.
- Scroll down to the Body field and select where you would like to insert the image that resides on another website.
The image below is that of the Body field in the Design/ WYSIWYG Editor. The Body field is circled in red. There is a large red arrow pointing to the exact spot where the image from another website is to be placed.
- 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 image from another website
- 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.
The side by side comparison below shows the image from another website placed into a specific part of a document Body field. The left panel shows successfully in place. The right panel shows the same image with the anchor handles circled in red.
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.
Below, the image is smaller and the anchor handles are still showing.
Insert an Image from another Website via the HTML Editor
- Go to the KB Admin Tools and open your document in the HTML Editor.
- In the Body field, select where you would like to insert the image that resides on another website.
- 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 (e.g. the URL of the image that resides on another website) 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 will appear where you have placed your image from another website.
<img src="https://website/images/flower.jpg" alt="" title="">
To modify the size of the image, update the code by adding height and width like you see here:
<img src="https://website/images/flower.jpg" alt="" title="" width="164" height="144">
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.