Adding Images to the Web System

Images can be uploaded to your site, where organizing, viewing, and publishing is streamlined.

Image Size

Before being uploaded to the web system, all images should be cropped and resized to the size at which they will be used. Please don't upload excessively large images. This includes images straight out of a digital camera as they tend to be too big to post directly to a web site.  You will need to use software to resize your images. Graphic software such as Adobe Photoshop, Adobe Photoshop Elements, or Windows Photo Gallery can be used to resize images.  If you don't have graphics software, you can access Photoshop through main campus' Virtual Labs.  If you are a faculty or staff member of UNC, then you can also access Photoshop training from Lynda.com free of charge.

 

Upload an Image to the Images Folder

  1. Navigate to the Images folder that is at the root of your web site.  We recommend, for organization sake, that images be placed in this folder.
    • Go to your web sites' Home page.
    • Click on the contents button on the green bar (you must be logged in to see this).
      Contents Tab 
    • In the list of contents, click on the Images folder. You will be taken to the contents view of the images folder.
  2. On the green menu bar, click add new... and then select image from the drop-down menu.

    AddNewImage.png
  3. You'll see the Add Image panel.
  4. In the Title field, enter a title for your image.
  5. If desired, enter a short description of the image in the Description box. Entering a description is optional, but encouraged. The description appears in search results, in content summary lists, and in hovering text boxes that appear when a user rests the mouse pointer over a title link.
  6. In the Image section of the form, click the Choose File button. A File Upload window will appear.
  7. In the file upload window, navigate to the image on your local computer that you want to upload, select it and click open.
  8. Scroll to the bottom of the Edit Image panel and click save. The main content area will switch to the view tab, so that you can preview the image.
  9. If you want your image to be viewable to all users, click the private status indicator and then select publish from the drop-down menu.
  10. This image is now available to be placed on a page.

 Tips

  • Upload JPEG (.jpg), GIF (.gif), or PING (.png) files as these are the most commonly used image formats used on the web.
  • Images will be uploaded to the place in the site where you were when you clicked the add image option.  If you uploaded an image outside of the default images folder and wish to move it there you can cut it from it's current location and paste it into the default images folder.
  • New images that are added outside the root images folder are displayed in the navigation when they are published. If you want to prevent an image from appearing in the navigation, see Excluding Items from the Navigation.

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 on 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, adjust its alignment & description, if applicable, & click ok at the bottom of the dialogue box.
  10. Alignment:
    • 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.
  11. Once you're done editing, save your page
  12. 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 do not.