Using the Image Editor

The image editor is a powerful tool within the CMS. We use it to create and edit images of specific sizes.  Please scroll to the bottom of this post to see common Image Editor errors. Here is a listing of the available Image Editor images and their corresponding sizes:

Note: Sizes are displayed as width x height. An asterisk (*) indicates that the size is variable.

The Image Editor is only capable of creating image sizes that are listed in the table above. You will need to decide on a location in the CMS for your image as well as what image size or sizes you would like to use. An advantage of using the Image Editor is that you do not need to size or crop your image before you load it into the CMS, you just need to follow a few rules. Your image needs to use the RGB color palette, be a .jpg, .png, or .gif, and be less than 10MB in size (.tif files will not work). No other restrictions apply. You can use Photoshop or another image editing program to save a version of your image that is compatible with the CMS. If you need assistance with your image format, please contact the UMC web group at <cmshelp@mtu.edu>.

Once you load your image into the Image Editor, you may crop it into multiple sizes (if necessary) that will be stored and associated with your one Image Editor file. Your Image Editor file will contain your original image along with each size that you crop. This will allow you and others to access multiple image sizes depending on where you wish to use your image or what you wish to use your image for.

Loading Your Image

Right click on or in the folder that you wish to store your Image Editor file. Select “New Image”:

Creating a new image editor item

You will be presented with this screen:

Image Editor content form

Fill out the various fields of the Image Editor content form.

The system title is only seen within the CMS. Use a system title that is descriptive of the image you are working with. This field is used when searching for the image within the CMS.

The display title is used by some CMS templates as a title above the image. Enter something short yet accurate; even if you don’t plan on using a display title on your page.

The image alt text describes the image to someone who can’t see it. This tag may be read by assistive software or by someone with a text-only browser, slow connection, or mobile device. Keep it short and to the point because it also appears when the mouse hovers over an image.

The image description is more informative than the image alt text. Say what’s happening, who’s in the photo, where the photo was taken, and any other information that would be interesting to readers. An added bonus is that it will help other editors in CMS to use your photo in the correct context.

Once you are done filling out the various textboxes, click on “Browse” and select your image to be uploaded into the CMS. A new section of the Image Editor content form will appear:

Filled out Image Editor content form

Use the checkboxes to select what image sizes you would like to crop for. You must select at least one size and you may select as many as you like. Its best to crop for all sizes that make sense, even if you aren’t sure that you will use all of them. Remember that each size that you crop for becomes available to the entire CMS community. If you do not crop for a specific size, that size will not be available for anyone else to use. Once you have selected your sizes, click on the blue “Next” button along the top. You’ll see a screen similar to this:

Using the Image Editor to crop

The text in the top left corner will let you know what image size you are cropping for. In the above example, we are cropping for a 95 x 95 pixel Small Thumbnail. The four red squares represent the area of the image that you are selecting. The area of the image outside of this rectangle will be cropped out. Click on any of the four red squares and drag them as needed to select the area of the image that you would like to use. Once you have selected an image area that you are comfortable with, click the blue “Next” button along the top.

You will be presented with similar screens as you crop for your different sizes. Once you have cropped for each size that you selected, you will be given a confirmation screen similar to this:

Image Editor confirmation screen

This screen will show you each size that you have cropped for plus the original image that was uploaded to the CMS. You may use the blue buttons across the top to go to previous screens to make changes or to save your image.

Common Errors

There are a few common error messages associated with the Image Editor:

1. “You must upload an image before continuing.” after you’ve uploaded a file
2. “HTTP Status 500″ after using the previous or next button.
3. Request processing failed; nested exception is java.awt.image.RasterFormatException: (y = height) is outside of Raster
4. Your image is rotated 90 degrees

You may receive the first error despite selecting an image to upload into the CMS. This can be caused by one of two things; either your image is a .tif file or it uses the CYMK color palette. To remedy this, save your image as another file type (.jpg being the safest) and make sure it uses the RGB color palette. Then you will be able to upload your image as normal. There is a 3rd party online CYMK to RGB image converter that may be helpful as a last resort. If you need assistance with your image format, please contact the UMC web group at <cmshelp@mtu.edu>.

You may receive the second error when using your previous or next buttons. This occurs when you select a cropped area with a width or height of zero pixels. This will cause the Image Editor to error. To fix this, start over and make sure you have selected an area to crop with a width and height of greater than zero pixels.

You may receive the third error when using an image that is smaller than the crop size that you are trying to create. The Image Editor will automatically select a preset number of pixels and, if your image is too small, fictitious/nonexistent pixels will be selected. You can see what all the default image sizes are at the top of this post. Somehow, more pixels are being selected than what exist.

You may receive the fourth error because your image was already rotated before uploading to the CMS. Unfortunately, the CMS has no rotation abilities. Advanced cameras can detect if you rotated your camera to take a photo and add some sort of variable to the raw data indicating so. Thus, certain “smart” programs on your machine will display your image as right-side up even though it is rotated 90 degrees. Other programs (and the CMS) will show that your image actually is rotated, as it was taken. You can  open your image in Photoshop or another image editing program it will most likely automatically rotate for you. All you have to do is “save” the image then.

Tags: banners, cropping, errors, faculty photos, image editor, image sizes, images, photos, staff photos, updating