University Marketing and Communications

Using Images

To add images to your web page, please prepare the image before uploading it. Edit and crop your image to how you want it to appear on the web page, including the approximate size, using Adobe Photoshop or a free source like Pixlr. Learn more about using Pixlr.

Make sure your image is one of the accepted file types (gif, jpe, jpeg, jpg and png) and 72 pixels per inch in resolution. Certain web page templates have a place for images built into them. These images must be a specific size. Learn more about the specifications of template images.

Name the image using the following guidelines:

  • Use short, descriptive file names.
  • Must be all lowercase.
  • Must consist of only letters and numbers, no spaces or special characters.
  • For spaces, please use a dash, (-) instead.
  • Acceptable names include: students-on-campus.jpg, mulford-library.png
  • Unacceptable names include: Students on Campus.jpg, Mulford_Library.png 

The University of Toledo must own the rights to the images or have permission to use the images that appear on our website. This means that you may not search the internet for images and save them to use on your web page. Using images taken by University photographers is highly recommended. To search these images, please visit The University of Toledo's photo system

In some special cases, a photo shoot may be needed. Request a photo shoot or learn more about the University's photography services.

How to add images

  1. Once your image is prepared, you will upload it to the "images" folder in your unit's folder in OmniUpdate. Browse to the page to which you want to add the image, log in and click the green "Edit" button Edit icon next to the section you want to edit.
  2. Place your cursor where you want the image to appear and click the insert image icon. Insert image icon 
  3. Click the browse button Browse Button to navigate to the images folder where you will upload the image.
    Please note that you have to upload the image to a folder that is specially designated for images before adding it to a web page. If the folder holding the web page you want to add images to has an images folder, then please proceed. If the folder does not have an images folder, then please contact webdevelopment@utoledo.edu and ask the web team to add one for you.

    Screenshot of insert image window

  4. Select the images folder to the left and click the "Upload" button Upload button to the right. 

    Screenshot of select image screen

  5. In the new window that appeared, you may upload the image in two ways:
    • Drag the image from your computer into the new window, then click the blue "Start Upload" button Start Upload button
    • Click the green "Add" button Add button , browse to the image on your computer, select it, click "Choose" Choose button and click the blue "Start Upload" button Start Upload button

      Screenshot of upload image screen
  6. Once the photo uploads, click the green "Close" button Green close button to close that window and the blue "Insert" button Blue insert button to select that image.
  7. In the window that you return to, type a description of the image in the "Image Description" field. 
  8. Click on the "Appearance" tab to manage your image placement. Here is where you can edit the alignment of the image, reduce its size and add space around the image.
    • Selecting options from the "Alignment" drop down menu will display a preview of them to the right. 
    • You may use the fields next to "Dimensions" to slightly reduce the size of your image. Be sure to check "Constrain Proportions" so that the image remains proportional and not stretched. However, it is recommended to resize your image to the exact dimensions you want it displayed at, before uploading it. 
    • Use the fields next to "Vertical Space" and "Horizontal Space" to add space around the image. 

      Screenshot of the image appearance tab
       
  9. Click the "Insert" button Green Insert button to place the image.
  10. Save your work by clicking the save icon Save button
  11. To make your edits live, click the green "Publish" button Publish button

Please note, the image you uploaded is now saved in the images folder for future use. However, you will not see the image in the folder in the "Staging" tab. To view the images, click on the "Production" tab near the top right of the page, as shown below. 

This is because the OmniUpdate content management system uses a staging server and a production server. The staging server is used to create, edit and preview content privately before publishing it. While the production server contains the published web pages that can be viewed publicly. Images and documents are uploaded directly to the production server, so you will not see them when the staging tab is selected.

Screenshot of images folder in production


How to resize images using Pixlr

To resize, crop and edit your photos, you may use Pixlr, a free online tool. 

  1. Open the image you want to resize.
  2. Select the crop tool located in the first row. Pixlr crop tool
  3. Create size constraints by clicking on "Constraint" in the drop-down in the top menu, selecting "Output Size" and entering the dimensions.
  4. Drag on your image and select the area to crop and double click the image to confirm your crop.
  5. Save your image by clicking on "File" then "Save as." Pixlr automatically saves your image to the prepared 72 pixels per inch when you save.

Pixlr software

Last Updated: 2/20/20