• Image Editor

IMAGE EDITOR

How to Add Images Into the Body of a Content Box Using the Insert/Edit Image Button

Instead of uploading your picture under “Image Information,” you can now use the image gallery to choose from images that you've uploaded. Here's how to get started:

  1. Log into your website as the administrator.

  2. Click the edit icon (pencil) on the content box that you want to add an image to.

  3. In the text editor, there is an icon that looks like a photo of a tree. This is the Insert/Edit Image icon. It's circled below.



  4. When you click on the Insert/Edit Image icon, the Image Information window will pop-up. There's a picture of it below. All the fields will be blank since you haven't inserted a picture yet. To get started, click on the browse button to the right of the Image URL field. This opens your Image Manager in a new window.


  5. The Image Manager allows you to choose images that you have uploaded to your site. At first though it may be empty. To upload your first photo, find the three icons to the far right and click on the middle Upload New Image icon.


  6. Once you have uploaded the image, a thumbnail(small version of your image) will appear in the Image Manager. When you have several images saved, you will be able to scroll through the thumbnails, as shown below.

    Notice that each thumbnail has several icon/buttons on it.
    • Magnifying Glass - shows the full size image as it will appear on the website.
    • i - provides information about the image like height, width and file size.
    • X - deletes the image
    • Hammer - pulls up an Image Editor allowing you to crop, resize, and save the image.





  8. In order to add an image to a content box, double-click the thumbnail of that image in the Image Manager. This will select it and take you back to the Insert/Edit Image window, shown below.


  9. Now the Insert/Edit Image window will have the selected image in the Image URL field. From here you can:
    • Set the alignment of the image within the content box
    • Edit the dimensions
    • Edit the border
    • Add horizontal or vertical space
  10. Click Insert to place this image in the body of your text editor.