You can use the WYSIWYG toolbar to upload images that you want to use in the body area of your site.

1. Create a new piece of content, then go to the Body field or any field with a WYSIWYG toolbar.
2. Click on the Image icon. The Image upload dialog displays.
   
3. Click on the Browse Server button. The CKFinder dialog displays.
4. Click on the Upload button. The File upload dialog window opens where you can navigate to locate the images you want to upload.
5. Click on the image you want to upload or hold down your Shift key to upload multiple images. The files are uploaded and available to be added to your folder.
   
6. Locate the image in the list and double-click on it.
7. Add Alternate Text (Alt Text) so that screen readers can identify the image for those who are visually impaired. 
   
8. Click OK and the image is added to your page in the location of your cursor.

Adding a Caption to an Image

If you want to have a caption display below your image, you can do so in the following way:

1. In the Image properties dialog, click on the Advanced tab.
2. Enter the text you want as the caption in the Advisory Title field.
3. When you save the image and page, the caption displays below the image.

There are times when your images need to be cropped prior to uploading, or you have a series of images that need to be the same size. To ensure the integrity of the photo, you should crop and scale the photo prior to uploading. 

While there are lots of software packages that do this, the instructions below demonstrate how to crop an image using Photoshop, which can be purchased through ITS software licensing at a reasonable annual rate.

Cropping an Image for the Rotating Header Image Feature

The Rotating Image Feature requires that images be pre-sized prior to uploading to ensure they are all the same size. Images must be 978px wide but the height can vary. However, the height should be consistent to provide a seamless transition between photos.

1. Open Photoshop and the image you want to crop/scale. Important Note: the image should not be smaller than the final desired size. 
2. Check to make sure the following toolbars are available:
   • Options
   • Tools
3. If not, you can make them available by clicking on Window in the main toolbar then clicking on both Options and Tools. They should have check marks next to them when they are selected.
4. With the toolbars available, click on the crop tool next on the tools menu. The Options menu displays up top.
5. Enter 978 px as the width and the height in the next box (in this example, we used 350 px). 
   
6. Move your cursor over the image to where you want to start your crop. Click an drag across until you can’t drag anymore. Photoshop will stop at the width/height specified in the Options menu. 
7. Hover and drag the cropped section to the part of the image you want to use for your rotating photo and double click. Your image will be cropped. 
8. Select File > Save for Web and Devices and save as a .jpg file. 

About Mixed Content Warnings

A Mixed Content Warning (pictured above) appears when a site’s connection is secure (using https) but the page content itself is not. This is commonly a result of directly referencing an existing image on the site using an absolute url pointing to http, though it can also be caused by hotlinking external images. 

Though this warning will not affect the security of sensitive data, these images themselves can still present a small security risk to your site and its users.

Fixing Mixed Content Warnings

When the image causing the Mixed Content Warning is referencing an image that has been uploaded elsewhere on your site, the warning can be fixed by editing the url of the problematic image to be a relative url, rather than an absolute one. This has the secondary benefit of ensuring that the image will continue to work if the site’s base url changes, or when a test or development build is pushed to production.

 To edit the image url, begin editing the page containing the image and double-click the image in the text body. Examine the URL field, which will be the first text field from the top. An insecure image will be using a full (absolute) url beginning with “http://” and containing the site’s base url, e.g. “http://yalesites.yale.edu/sites/default/files/images/Screen%20Shot%20201… .” 

A relative url will contain everything after the “.edu”, with the format “/sites/default/files/images/filename.jpeg”, as seen in the figure above. To change an absolute url to a relative one, remove everything before “/sites” in the URL field.

Repeat the above instructions for any media not directly uploaded to the page returning the Mixed Content Warning until the warning no longer appears in your browser.

If the problematic images are being hotlinked from an external source, downloading the image and uploading directly to the site will dismiss the warning.