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

    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 the 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

    Linking an Image from a URL 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">

    Example:

    I have inserted this image from a URL into my document.

    two_birds_sand

    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.

    url_title_linked_image


    See Also:




    Keywords:kb knowledgebase knowledge base users user guide embed embedding in doc document documents url image web picture WYSIWYG   Doc ID:5544
    Owner:Teresa A.Group:KB User's Guide
    Created:2007-03-13 19:00 CDTUpdated:2017-04-03 17:02 CDT
    Sites:KB Demo, KB Demo - Child Demo, KB User's Guide
    Feedback:  5   2