The WYSIWYG text edit box allows editors to insert pictures already uploaded to the page.  This procedure assumes your Community Center application has a Picture Library in each page template.

NOTE: If your website is a responsive design, please use the Insert Responsive Pictures procedure instead of this one!

 

When you are ready to insert a picture in the text:

  1. Position the cursor at the beginning of the text with which you would like the picture associated.
  2. Click the Insert/edit image button.  The Insert/edit image window appears.
  3. From the Image list, select the file name of the picture you wish to insert.
  4. In the Title box, type a text description of the picture.
  5. Click the Appearance tab.
  6. From the Alignment list, select Left or Right.
  7. In the first Dimensions box, type a number representing the width of the picture in pixels, then press the Tab key.  Allow the value in the second Dimensions box to be automatically calculated.

Note: Most monitors display about 100 horizontal pixels per inch.  If text will wrap around the picture, a width in the 200 to 300 range is usually best.  If the picture will appear by itself, then a width in the 400 to 550 range is usually best.

  1. If text will wrap around the picture, type 5 in the Horizontal space box.
  2. In the Border box, type 0 (for no border) or 1 (for a thin border).
  3. Click the Insert button.  The picture appears in the text.

 

To add a link to the picture:

  1. Click the picture in the text box then click the Insert/edit link button.  Treat as any link.

To add a link that will display the picture full size:

  1. Set the current browser window to the page being edited and find the picture in the Picture Library section of the page.
  2. Right-click the picture and select Copy Shortcut (Internet Explorer) or Copy Link Location (Firefox).
  3. Change the current browser window to the edit form.
  4. Click on the picture in the text box then click the Insert/edit link button.  The Insert/edit link window appears.
  5. Right-click the URL box and select Paste.  The URL to the picture appears in the box.
  6. Click Insert.  The Insert/edit link window disappears.
  7. Submit the page.
Component for this Procedure: Text Editor
Minimum Community Center Version: 4
User Role: Editor
Procedure Link: http://www.liaa.org/howtoprocedure.asp?howtoid=13