Images

All images are created in the CMS using the Image Editor gadget. You can crop specific sizes using the gadget, insert the cropped images in pages, and replace existing images. The image editor will automatically optimize and publish the images. Make sure the image that you’re uploading is less than 25 MB so that it is able to be used in the editor—when downloading a file from the UMC photo database, select the 4800 px option. All images used in the Image Editor must be RGB format, not CMYK.

If you want the user to perform an action (apply, attend an event, etc) you should incorporate images onto your page to be more engaging. For pages that are purely informational, administrative, or internal, images are not necessary.

Tip: If you insert an image from the Image Editor onto a page, but the image is rotated or had a chunk of black covering it, this is because the Image Editor cannot read EXIF data (a special region where digital cameras record additional information about a photo such as the date and time it was taken, GPS coordinates, and the orientation of the device). Open the original image in a photo editing application, rotate the image 360 degrees, and save a copy. Use the copy in the Image Editor Gadget.

Create New: Uploading and Cropping

You will use the Image Editor gadget to upload and crop your images to the appropriate size(s). It’s located in the Gadget Sidebar. Open it by clicking the plug icon   in the upper right corner of the screen.

You must have a page open to see the Image Editor option in the Gadget Sidebar. Whatever page you have open will determine the folder location for the images folder that the Image Editor will create.

Scroll up or down in the Image Editor gadget to see all the field options.

1. Open the page where you intend to insert an image.
2. Open the Image Editor gadget in the sidebar.
3. Click the Upload Image button to select an image file from your computer. The file must be a .jpg or .png and under 25 MB.
4. Once your image is selected, you can change the image filename by typing in the Image Filename field.
   1. The filename will default to the name of the file from your computer with any capital letters made lowercase and spaces or other characters changed to hyphens.
   2. Change your filename, if needed, to be descriptive of the image. For example, use campus-panorama instead of img-1234567.
   3. When the gadget saves your cropped images the image type and size will be added to the end of your filename.
5. Check one or more boxes for the image type(s) you want to create. You can also select All to crop all image types. Note: instructions for specific snippets or functions in the CMS will typically tell you which type(s) to create. See more about the Image Options.
6. Click the blue Begin Cropping button
7. A new window will open to allow you to crop each image size you selected. Move and resize the crop box as needed. For all types except Vertical you will not be able to change the aspect ratio.
   1. The image size currently being cropped will be displayed at the top of the page.
   2. For the Vertical type click the Select Whole Image button to select the entire image.
   3. The Crop Status will let you know which of the sizes for that type will be cropped. The system will not crop an image size if that size is wider than the original image size.
   4. The Preview at the bottom of the window will show you what the final image will look like, to scale.
      
8. Click the Previous button to go back one screen, click the Next button to go to the next screen, or click the Exit button to leave this window without saving.
9. The final screen you will reach when clicking Next will be the confirmation screen. Preview all sizes of your images and review the Crop Status. Click Previous to go back and recrop images, Exit to leave the window without saving, or Confirm to save your changes and create the images.
   1. When creating the images, the files will be compressed and optimized for the web.

Edit Existing Image

If you need to edit an existing image that was created using the Image Editor gadget, you can follow the same instructions, except choose the Existing Image button instead of Upload Image in step 2. This will let you choose an original image from within the CMS. You will be able to change the crop of an existing image type or add a new image type. Once selected, you will be able to continue with cropping.

If you receive an error in the window that opens, close the window, save any changes you were making in the CMS, and reload the browser window. Then click the Existing Image button again.

Insert Image

Once your images have been created you can use the Insert/Edit Image icon from the toolbar to place the picture.

1. Click the Insert/Edit Image icon in the toolbar.
2. Click the file chooser icon.
3. Navigate to and choose the correct-sized photo that you cropped. Do not select the -orig option.
4. Enter a description for the image. This is the alt text used by screen readers and other assistive technology.
5. Click the blue OK button.

Replace Existing Image

You can change an existing image and its crops to a new image and have it automatically update across all pages where it is used.

1. Open the page in the folder that has the images folder where the image you want to replace is stored.
2. Follow the instructions for creating a new image, making sure that the file on your computer is named the same as the original image that you are replacing (without the -orig part).
   1. If the filename is different, change the filename in the Image Editor to match after you select it.
   2. Make sure you select at least the same crop sizes that already existed.
3. Publish the page(s) that the images are on.

Image Size Options

Learn more about using a banner image on a page with MultiEdit Content.