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

  1. In the Body field, select where you would like to insert the URL image.
  2. Click on Add Image Icon (the Insert image button)
  3. 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.
  4. 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.
  5. Click on the previewbutton button to see if the image placement is to your liking.
  6. To further enhance the embedded web image, click on the ImageProperties 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:
  7. ImageStyleProperties.png
    • 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.

  8. Click on the Apply styling button to save your changes.
  9. If you are using Firefox, elements in that browser (that are not controlled by the KB) allow you to resize the embedded web image. Follow all the steps above. Once the image is in place, click on the image in the WYSIWYG editor to enable the anchor handles to appear. In the image below, a web image of a flower has been embedded below the text. The image on the right shows the anchor buttons circled in red that will appear upon clicking on the image.
  10. Firefoxwebimageanchorhandles.png

    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.

    small_image.png

Embedding Images in the HTML Editor

  1. In the Body field, select where you would like to insert the picture.
  2. Click on IMG_html (the Image button)
  3. 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.
  4. Enter the target URL, which you can find from the Attachment field, and then click OK.
  5. Enter a Title/Description. This is also referred to as alt text which is important for web accessibility.
  6. Click on previewbutton to see if the image placement is to your liking.
  7. 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">



Keywords:kb knowledgebase knowledge base users user guide embed embedding in doc document documents url image web picture   Doc ID:5544
Owner:Teresa A.Group:KB User's Guide
Created:2007-03-13 18:00 CSTUpdated:2016-08-29 15:33 CST
Sites:KB Demo, KB Demo - Child Demo, KB User's Guide
Feedback:  2   2