Add Images

Add Images

Before getting started, please familiarize yourself with the Image Policy for the Web.

Add Image Tutorial

View the Add Image tutorial video in YouTube, or read the step-by-step instructions below.

Step-by-Step Instructions to Add Images

Images can be entered within the Body area of the page. Before uploading your image, be sure that the image is the correct size and has a file name that reflects what the image is.

  • For a vertical image: Height of 400 pixels (or a smaller) 
  • For a horizontal image: Horizontal 400 pixels (or a smaller number)
  • Ensure that neither the width nor height exceeds 400 pixels
  1. In the Body section, select the image icon.
    image_imce.png
     
  2. A new window will open a file manager system.
    image_imce_window.png
  3. In the left "Navigation" bar, select which folder you would like to add the image to.
    Select the "Sites" folder, and then select the site folder you are working on. (i.e. center-women). If you do not see a folder for your site, stop and send a request to Webmaster@stkate.edu. We will help you find your folder or set one up for you. Do not import images into any other site's folder but your own.
    addimage_2.png
  4. Select Upload, browse for file, and click "Upload" within the upload window.
    addimage_3.png
  5. Select the file in the list on the right that you've uploaded and select "Insert file."
    addimage_4.png
  6. Once the image is inserted into the page, double click it to bring up the "image properties" dialog box. In this box, erase any width and height numbers that appear. Keeping numbers in these could cause your image to become distorted. Then write in your own Alternative Text. Learn more in the Image Properties Step by Step Instructions or video.
    addimage_5.png

Image Properties Tutorial Video

View the Image Properties tutorial video in YouTube, or read the step-by-step instructions below.

Step-by-Step Instructions for Image Properties

  • Once your image is in the Body, double click (or right click) on the image to open the Image Properties box.
  • Edit the Alternative Text field so the words describe what the image is. For example if it is a picture of the Wildcat holding balloons, write "Wildcat with balloons." (Learn what makes good Alternative Text in this article: No More Excuses: The Definitive Guide to the Alt-Text Field)
  • Next erase any numbers that appear in the Height and Width fields. Your image should be sized prior to importing to the CMS. Leaving numbers in this field will cause the image to appear warped in some browsers and not resize in mobile devices as readily.

Image Sizing and alt text example

  • Then click OK. Save your draft then View Draft. If you like the way it looks, then continue with your other edits. If the photo needs more work double click on the image to open Image Properties and consider the HSpace, VSpace and Alignment options.

  • Adding a number to HSpace (horizontal space) will place that many pixels of space to the right and left of the image. In general you would only need 5-10px.
  • Adding a number to VSpace (vertical space) will place that many pixels of space to the top and bottom of the image. In general you would only need 5-10px.
  • Alignment will play with the way that the text wraps around the image.

Image properties tutorial illustration

Delete Image Tutorial Video

View the Deleting Image tutorial video in YouTube.