Great photos bring color and life to your website.

Upload Your Image

Upload your image using the correct method for your page type. 

Upload Type Content/Page Type
Inline Image Any page type in the body copy field.
Direct Upload Main images, blog posts, events, photo galleries, Drupal paragraphs

Inline Image

Steps

  1. Prepare your image for the web: Image dimensions are flexible; if you want the text to wrap around your image the image should be no more than 300-400px wide, and if you want the image to span the full width of the content area it should be no more than 800px wide. When saving your image file after cropping, use the "save for web" or similar option (if available on your image editing software) to further compress the file size if possible. If you have trouble or don't have image-cropping software, just email us and we can help.
    • Helpful tip: Give your image file a descriptive name so that you can easily find it in the media library later. Our recommended naming convention is "Department-Name_Image-Description_Image-Dimensions," e.g. Web-Team_Image-Upload-Screenshot_400x400.
  2. Go to the page where you would like to display the image.
  3. Click "edit" and "edit homepage (or inside page)".
  4. Scroll to the body copy field.
  5. Put your cursor where you would like to place your image.
  6. Click the "image" icon.
  7. Click on your department/office folder. The folders are in alphabetical order in two groups (capitalized and lower case). If your department does not have a folder you can email the web team to request one.
  8. Click "Upload".
  9. Click "Choose File".
  10. Select your image from your computer.
  11. Click "Upload".
  12. Click "Insert file" or double click the name of your newly uploaded image file.
  13. After inserting the file, add alternate text to your image. Alt-text should be a short, helpful description of the image. If the image is for decorative purposes only, type "" within the alternate text field so that search engines and text readers know to skip it. Read more tips on writing great alt-text.
  14. Optional: Text Wrap
    1. Select "left" or "right" in the alighment field to allow the text on your page to wrap around your image.
    2. The system will automatically add margins around your image based on the alignment; there is no need to enter anything into the VSpace or HSpace fields.
  15. Click "ok".

Direct Upload

Steps

  1. Prepare your image for the web: The image dimensions will depend on where you are uploading your image; please reference the help text below the image upload field in the CMS for the exact dimensions you should use. When saving your image file after cropping, use the "save for web" or similar option (if available on your image editing software) to further compress the file size if possible. If you have trouble or don't have image-cropping software, just email us and we can help. Some examples of image help text:
    • Helpful tip: Give your image file a descriptive name so that you can easily find it in the media library later. Our recommended naming convention is "Department-Name_Image-Description_Image-Dimensions," e.g. Web-Team_Image-Upload-Screenshot_400x400.
  2. Click "Browse".
  3. Click "Choose File".
  4. Select your cropped image from your computer.
  5. Click "Upload".
  6. Click "Next".
  7. Add alternate text to your image once it has uploaded. Alt-text should be a short, helpful description of the image. If the image is for decorative purposes only, type "" within the alternate text field so that search engines and text readers know to skip it. Read more tips on writing great alt-text.
  8. Click "save".

Optional: Media Library

  • After step 2 above, instead of uploading a new image you can browse the library of existing images by clicking on the "Library" tab in the media browser. Use the search options to find the image you are looking for and double click the image to insert it.
Contact Us
Academic Commons
Attalie Dexter
Technical Web Administrator & Product Manager