Adding Images

Images are a vital part of creating a vibrant, living website, and we encourage users to incorporate high-quality imagery wherever possible in their web presence.

Before uploading your image to the website, ensure that your image has the correct dimensions and has been optimized for use on the web. See Optimizing Images for the Web for a tutorial on image optimization.

Click here to see appropriate dimensions for different types of images.

Image Options

Image embedded in Text Editor

An image can be embedded in any widget that uses the default Text Editor. To embed an image:

1. Enter the text that will surround the image before adding the image itself.
2. Place your cursor where you would like the image to sit. Add line breaks if necessary.
3. Click the "Media Entity Embed" button on the toolbar. The button looks like a capital letter "E".
   
4. You may select a previously uploaded image, or upload one of your own.
   • To use a previous image, click the "Choose Existing Media" tab and browse or use the filters to select an image. Click the image, then click "Select Media".
   • To upload a new image:
   1. Enter a name for your image in the "Name" field. The name should make the image easily searchable, using complete words describing the content of the image. Also include the resolution of the image in the name, with the format WWxHH.
   2. Enter a short sentence describing the image in the "Alternative Text" field.
   3. Click "Choose File" to select an image from your computer.
   4. Click "Save Image".
5. Select an alignment from the window to align the image to the left, right, or center. In most cases, images wrapped in text should be aligned to the right or left, and images on their own line should be aligned to the left or center.
6. Add a caption to the image in the "Caption" field if you wish.
7. Click "Embed".

Card/Card Group

A Card widget allows you to add images that act as links, along with a title, description and short text link. The Card Group widget allows you to place up to 3 Cards in a row. To add a Card or Card Group:

1. Open the editor for the piece of content you'd like to add a Card or Card Group to. (See Accessing the Page Editor if you're not sure how)
2. In the Sections area of the editor, either add a new section or click "Edit" on an existing section.
3. Under Content, click the arrow of the drop-down menu. By default, the drop-down displays "Add Text". Choose "Add Card" or "Add Card Group" from the drop-down menu.
4. Select a photo for your Card. Click "Browse Media" to choose a photo from the library or "Add Media" to upload your own photo.
5. Enter a title for your Card in the "Title" field.
6. Enter text for the card description in the "Text" field.
7. Enter a link in the "URL" field.
   • To link to content on colgate.edu, begin typing the name of the content and select the correct content from the drop-down menu.
   • To link to external content, copy and paste the link into the "URL" field.
8. If creating a Card Group, add additional Cards with the "Add Card" button.

Image with Caption

The Image with Caption widget allows you to add an image that uses the full width of the page and add a descriptive or additive caption.

1. Open the editor for the piece of content you'd like to add the image to. (See Accessing the Page Editor if you're not sure how)
2. In the Sections area of the editor, either add a new section or click "Edit" on an existing section.
3. Under Content, click the arrow of the drop-down menu. By default, the drop-down displays "Add Text". Choose "Add Image with Caption" from the drop-down menu.
4. Select a photo. Click "Browse Media" to choose a photo from the library or "Add Media" to upload your own photo.
5. Write a caption for the photo in the "Caption" field.

Slideshow

The Slideshow widget creates a rotating slideshow for images with headers, text, and links superimposed over them, and buttons for rotating the slideshow.

1. Open the editor for the piece of content you'd like to add a Slideshow to. (See Accessing the Page Editor if you're not sure how)
2. In the Sections area of the editor, either add a new section or click "Edit" on an existing section.
3. Under Content, click the arrow of the drop-down menu. By default, the drop-down displays "Add Text". Choose "Add Slideshow" from the drop-down menu.
4. Select a photo for your first Slideshow Item. Click "Browse Media" to choose a photo from the library or "Add Media" to upload your own photo.
5. Enter a title for your Slideshow Item in the "Title" field.
6. Enter text for the Slideshow Item in the "Text" field.
7. Enter a link in the "URL" field.
   • To link to content on colgate.edu, begin typing the name of the content and select the correct content from the drop-down menu.
   • To link to external content, copy and paste the link into the "URL" field.
8. Add additional Slideshow Items with the "Add Slideshow Item" button. Each Slideshow Item is one slide in the slideshow.

Spotlight

The Spotlight widget can be a useful all-in-one page layout widget. It adds and lays out an image with a header, text, and button links. To add a Spotlight:

1. Open the editor for the piece of content you'd like to add the Spotlight to. (See Accessing the Page Editor if you're not sure how)
2. In the Sections area of the editor, either add a new section or click "Edit" on an existing section.
3. Under Content, click the arrow of the drop-down menu. By default, the drop-down displays "Add Text". Choose "Add Spotlight" from the drop-down menu.
4. Enter a title in the "Title" field. This will appear as header text.
5. Select a photo. Click "Browse Media" to choose a photo from the library or "Add Media" to upload your own photo.
   • By default, Spotlight photos align to the left. Click the "Reverse" check box to align the photo to the right. This is useful when laying out a page with multiple Spotlights in a row.
6. Enter text for the Slideshow Item in the "Text" field.
7. Enter a link in the "URL" field.
   • To link to content on colgate.edu, begin typing the name of the content and select the correct content from the drop-down menu.
   • To link to external content, copy and paste the link into the "URL" field.
8. Add additional buttons with the "Add Another Item" button.

Image Sizes

The table below provides image sizing information for various use cases across the Colgate website. For information about how to crop and optimize for these requirements, see Optimize Images for the Web.