Adding Images to Pages

Images can be incorporated into page layouts.

Insert a Previously-Uploaded Image

If you have uploaded an image to your site as described on the Adding Images to the Web System, follow these steps to incorporate it into a page:

  1. Navigate to the page in which you want to add an image.
  2. Click on the edit tab in the green menu bar (you need to be logged in to see this).
  3. In the Body Text, place your cursor where you want the image placed on the page and click on the Insert/Edit Image button (Image).
  4. In the dialogue box that pops up, browse to the location in your site where the image is located.  If the image was uploaded to the Images folder at the root of the site (as recommended), click on the Home link and then select the Images folder. 

    AddingImages_01.png
  5. Select the image you'd like to display on the page.
  6. Modify the image details:
    • Description and Caption - checking the caption box will display the text in the Description box as a caption under the image.  The caption won't be viewable when editing the page.  It is viewable once the changes have been saved (once you are out of edit mode).
    • Alignment- you can float an image to the left or right and have the surrounding text/content wrap around it.
      • Inline (default) - Places image on the same line as the text.
      • Left - Places image to the left of the text.
      • Right - Places image to the right of the text.
    • Image Size - a list of optional sizes at which to display the image. Even though the dimensions listed make it appear as though the image will be cropped to a square shape, that is not the case. It is only the longest side of the image that will be resized to the listed dimensions and the opposite side of the image will scale proportionally. So if you have an image that was originally 1,000 x 800 pixels, and you selected the Preview size when placing it on the page, the longest dimension of the image (the 1,000 pixels) would now be 400 pixels and the other dimension (the 800 pixel side), would scale proportionately to 320 pixels. Images can only be sized down. You cannot choose a size larger than the image that you started with.

      AddingImages_02.png 
  7. Click the OK button at the bottom of the dialogue box to place the image on the page.
  8. When you have finished editing the page, scroll to the bottom and click ok.
  9. The main content area automatically switches to the view tab in the green bar so that you can preview the page with your changes.
  10. If the changes you just made do not appear, simply refresh the browser window by holding down the Shift key and clicking on the refresh / reload button in your browser.

Upload an Image from a Page You're Editing

If you forget to upload an image before editing a page, you can now upload and insert an image directly onto the page you're working on. To do so:

  1. Navigate to the page in which you want to add an image.
  2. Click on the edit tab in the green menu bar (you need to be logged in to see this).
  3. In the Body Text, place your cursor where you want the image placed on the page and click the Insert/edit Image button (Image).
  4. In the dialogue box that pops up, navigate to the location in your site were you'd like to store the image, such as the default images folder at the root of your site.
  5. click on the Upload link in the lower left-hand corner. You will see some Add New Image options pop up on the right side of the dialogue box. 
  6. Click on the Choose File button. 
  7. In the file upload window that pops up, navigate to the image on your local computer that you wish to upload.  Select it and click open
  8. Give the image a title and description (optional), then click upload



  9. If the newly-uploaded file isn't already selected, select it from the bottom of the Image list.
  10. Modify the image details:
    • Description and Caption - checking the caption box will display the text in the Description box as a caption under the image. The caption won't be viewable when editing the page. It is viewable once the changes have been saved (once you are out of edit mode).
    • Alignment- how you float an image to the left or right and have the surrounding text/content wrap around it.
      • Inline (default) - Places image on the same line as the surrounding content on the page.
      • Left - Places the image to the left of the surrounding content.
      • Right - Places the image to the right of the surrounding content.
    • Image Sizea list of optional sizes at which to display the image. Even though the dimensions listed make it appear as though the image will be cropped to a square shape, that is not the case. It is only the longest side of the image that will be resized to the listed dimensions and the opposite side of the image will scale proportionally. So if you have an image that was originally 1,000 x 800 pixels, and you selected the Preview size when placing it on the page, the longest dimension of the image (the 1,000 pixels) would now be 400 pixels and the other dimension (the 800 pixel side), would scale proportionately to 320 pixels. Images can only be sized down. You cannot choose a size larger than the image that you started with.
  11. Click the OK button at the bottom of the dialogue box to place the image on the page.
  12. Once you're done editing, save your page.
  13. Since all images uploaded to the system are in the private state, you must navigate to your sites 'Images' folder (or wherever you've placed your image) and publish it.  If you do not publish it, visitors to your site will not see the image.  You, as a site editor, will see the image because you can view private content on your site but site visitors can not.

 

Linking an Image

If you wish an image to be a link you can select the image and click on the Insert/Edit Link icon in the toolbar.   Alternatively, you can right-click on the image and select Insert/Edit Link.  When the link dialogue box appears, choose the appropriate tab for the kind of link you you wish to insert.

  • Internal - Link to something within your site.
  • External - Link to a another web site.  
  • Email - Link to an e-mail address.
  • Anchor - Link to an anchor within the current page.

InsertEditLink.png