Navigation

Images

Insert, remove, and replace images.

Be sure to follow the Web Style Guide for Images when adding photos and graphics to your web pages. Contact Marketing and Communications if you need help with images or with getting photography release forms.

Image File Types and Size

Use only the following file types for your images:

  • .PNG (icon, logo, screenshot)
  • .JPG or .JPEG (photo)

Do not upload files over 1MB. 

Images Folder

Your images folder contains your images. If your website does not have an images folder, please create one to store your images. 

Inserting and Deleting an Image

Here’s how to insert and delete an internal image* on your page:

  1. In the page you're editing, go to the main content area / text section.
  2. Place your cursor where you want the image to go. 
  3. Click the Insert/edit image button. 
    tinymce-insert-edit-image.PNG
  4. On the Internal Image tab, find your image via the "Current path" navigation (read the section on inserting an internal link in the Links section, if you have trouble understanding the navigation). When you've found your file, click on its name to select. 

    insertimage2.png


  5. You can optionally fill out the Title field (this is the image's caption) and the Alternative Text field (text that will appear for a user if the image cannot load). 
  6. Use the Align menu to choose where the image will appear on your page: Inline, Right, or Left. We recommend Right. (See the Alignment of Images section on this page for more information)
  7. Use the Size menu to select the image's size. You can experiment with different sizes and click Insert to see how the image renders. However, we recommend Mini (200x200) or Preview (400x400).
  8. Click the Insert button to insert the image on the page.
  9. Save your page draft and review the page to make sure the image displays properly.
  10. If you wish to delete your image, simply edit your page, click on the image and delete it using delete or backspace command.

Note: Removing an image from a page does not remove it from the website. To remove it from the website entirely, follow the steps on this page for removing an image from the website.

*When clicking the Insert/edit image button, the menu that appears will have tabs for inserting internal images, external images, and images from your computer. The functionality for inserting external images is similar to linking to an external page. The functionality for inserting an image from your computer is similar to adding a file. If you need help, please contact the Web Team (MCO)

Alignment of Images

Inline

Inline alignment of images means that you can insert an image within a paragraph text.

CNM Image Example
 This image will line up along the text baseline and create blank space between the paragraph lines. 

Right

CNM Image Example

Right alignment of images means you can insert an image within a paragraph text. This image will flow to the right of the text.

We highly suggest using this alignment for images. Using Right alignment to display images looks best, as it does not break the continuity of text on the left side of the page and allows for easier page scanning.

Left

CNM Image Example
 

Left alignment of images means you can insert an image within a paragraph text. This image will flow to the left of the text.

 

Removing an Image From the Website

Follow the steps for Deleting a File to remove an image from the website. Instead of searching for a file in the documents folder, you will search for your image in the images folder. 

Replacing an Image

Follow the steps for Replacing Files to replace your image with a new one. Instead of searching for a file in the documents folder, you will search for your image in the images folder. 

Note: Always replace images from your images folder, leaving the image title the same. This will ensure that the image will be replaced correctly on all pages it's on, as well as ensure that the file being replaced has been removed.