Contributors > Add Images

 

This guide covers adding and editing images within a formatted text element. Images can also be added outside of a text element, but that eliminates alignment options.

There are two ways to add an image in a text block:

• Click the ‘Insert Image’ button for an image without a caption.
• Click the ‘Insert Snippet’ button for an image with a caption.
  

Insert Image

1. Open the text block element.
2. Place the cursor to the desired point of insertion and click the ‘Insert Image’ button in the toolbar.
3. From the pop-up window, click the ‘Gallery’ button to add an image that previously has been uploaded, or ‘New’ to upload an image from your computer.

---

Gallery

1. To use an image from the gallery, click on the 'Gallery' button and the image gallery search page will open.
   
2. It is helpful to search for an image by category. Most images will be found either under ‘School,’ ‘Student Life,’ or ‘General.’ You can also search by keyword.

---

 

New Image

Be sure your image is optimized for the Web (72 dpi)  and in RGB Color Mode before you get started. We suggest jpeg files, otherwise gifs or pngs should also work. Name the file using lowercase letters, e.g., mytulaneimage.jpg. It is better to also pre-size it, though you can resize the image in the CMS also. There is no need for any uploaded picture to be wider than 850 pixels.

• 72 dpi
• RGB Color Mode
• jpeg file
• not wider than 850 pixels
• named in all lowercase
  

1. To upload a new image, in the image window click the ‘New’ button.
   
2. Another window will appear.  Click ‘Browse’ and locate the file on your computer and click ‘Open.’
3. Next:
   

4. This will bring you back to the original image window.  Clicking ‘OK’ will insert the image where your cursor was set.
   

That is the most basic way to insert an image.  To see some other options, read on. 

---

 

Edit or Replace Image

To edit the properties of an uploaded image, select the image and click the image button in the toolbar. You can replace it by clicking the uppermost ‘Edit’ button of the image and then selecting the ‘Update Image’ option in the pop-up window. Update the other image properties if needed.

Image Size

VIA POP-UP ‘IMAGE PROPERTIES’ WINDOW

1. Click the image once to select it.
   
2. Click the ‘Edit’ button of the Image Size field.
   

VIA POP-UP ‘IMAGE PROPERTIES’ WINDOW

1. Click the image once to select it.
2. Change the size fields of Image Properties in the grey box at the bottom of the text block.
   

Image Spacing and Alignment

An image in the text block element will not have any spacing around it.  There are two ways you can resolve this.

VIA STYLE
Image That Aligns With Side Margin & Text Wraps

You can apply a standard 10-pixel margin around the three sides of an image, excluding the side which aligns on the left or right margin, by applying a style from the toolbar.

1. Click the image once to select it.
   
2. Select "float_left" or “float_right” from the styles menu to align the image and to apply margins around the 3 sides of the image. The text will wrap around it.
   
3. DO NOT change the alignment elsewhere in the Image Properties box.
   

VIA PROPERTIES
Image in the Middle & Text Wraps

You can apply margin around all four sides of an image by applying a style from the toolbar.

1. Click the image once to select it.
   
2. Click the ‘Edit’ button of the Image Size field. When the pop-up menu appears, select the vertical and/or horizontal spacing in pixels.  We suggest 5-10 pixels. Click ‘OK’ when done.
3. Choose an alignment from the Image Alignment menu, or Select the ‘Advanced’ button of the Image Properties in the grey box at the bottom of the text block and change the alignment field,

Alternate Image Text

To facilitate use by text-only browsers, include descriptive text in the Alternate Image Text (flyover text) for every critical image. Suggestions:

• Use the present tense.
• Full sentences with punctuation are preferred: "Instructor teaching students in a classroom."
• For a photo of one person, simply "Michael Jones" is fine without punctuation.
• Limit words to about 10-12. The CMS restricts viewing of text on Macs to 80 characters including spaces.
  

Linking an Image

1. While you are in the image properties window, click the ‘Edit’ button to the right of the ‘Link’ section. Then follow the guide to Create Links.
2. Finish inserting the image by clicking ‘OK.’

---

Inserting an Image with a Caption

VIA SNIPPET

This will give you an image holder and an additional light green shaded box for a text caption (which you can delete).

1. To insert an image with a caption, click on the ‘Insert Snippet’ button in the toolbar.
2. Choose the image caption html snippet:

3. Highlight [Insert image here, delete this text] and click the ‘Insert Image’ button on the toolbar to insert an image.
4. Next type in your caption over the text [Caption text goes here] and you're done.
   

---

Learn more about images and sizing in the online Contributors Guide.