KB User's Guide - Documents Tab - Embedding Web Images
This document explains how to embed web images into your KB documents. We recommend that Firefox is used when performing this
Embedding URL Images in the 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 your 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.
Embedding Images 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">