Exchanging Experiences, Expanding Opportunities

Upload and Insert an Image

Images can be inserted within the text of a variety of content types, including blogs, document descriptions, news items, events, and press releases. 

Objective(s):

The user will be able to upload and insert an image.

Assumptions:

It is assumed you know how to access the appropriate form to create new content (Add an Event, for example).

Instructions:

(In this example, we will be adding a news item.)

  1. On the News page, in the Add News Content block, click Add News.
  2. Fill out the Create News form as desired.
  3. To add an image: 
    1. Scroll down to the Image section.
    2. Click Choose File and browse to locate the image on your hard drive; click Choose.
    3. Note: Files must be less than 1 MB and must be one of the following file types: png gif jpg jpeg.
    4. Click Upload.
    5. Scroll up to the Body text field and place your cursor where you would like to insert the image.
    6. Scroll back down to the Image section.
    7. In the Style drop-down list, you can choose a scaled size for your image. "Scale_100w" means your image will be proportionally scaled down to a maximum width of 100 pixels. Choose "Original" to place the image at full size. 
    8. Click Insert.
    9. Scroll up to the Body text field to view the inserted image.
    10. If you would like to further modify the image (add a border, specify word wrapping, or adjust size), click on the image itself, and then click the image icon in the text editor menu.
      1. An Insert/Edit Image dialog box will appear.
      2. For Alignment, you can choose the desired placement for your image within the text. "Left," for example, will place your image in the upper left corner and the text will wrap to the right and bottom of the image.
      3. TIP: For Dimensions, easily scale a full size image to fit the width of the display area without unwanted stretching by placing a pixel width of 615 in the first box and leaving the second box blank. Adjust the pixel width as desired. If the quality degrades, try re-inserting the original image.
      4. For Border, type a "1" to place a thin black border around the image. Higher numbers will result in thicker borders.
      5. Click Update.
  4. You can add additional images by following the same steps above. 
  5. When you are done editing your content, scroll down to the bottom and click Save.
Audience:
Tutorial Topics: