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

    1. Go to the KB Admin Tools and open your document in the Design editor, or what we call, the WYSIWYG Mode.

    2. 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.


    3. Click on Add Image Icon (the Insert image button)
    4. 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.
    5. 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.
    6. Click on the previewbutton button to see if the image placement is to your liking.
    7. 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:
    8. ImageStyleProperties.png

      • 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.

    9. Click on the Apply styling button to save your changes.
    10. 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 from the other website is in place, click on that image in the WYSIWYG editor to enable the anchor handles to appear. 

      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.
    11. 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.

      Below, the image is smaller and the anchor handles are still showing.

      small_image.png

    Insert an Image from another Website via the HTML Editor

    1. Go to the KB Admin Tools and open your document in the HTML Editor.

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

    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 insert add place   Doc ID:5544
    Owner:Teresa A.Group:KB User's Guide
    Created:2007-03-13 19:00 CDTUpdated:2017-12-15 17:34 CDT
    Sites:KB Demo, KB Demo - Child Demo, KB User's Guide
    Feedback:  9   2