Images

Images are created in the CMS using a gadget. You can crop specific sizes using the gadget, insert the cropped images in pages, and replace existing images. The image editor will automatically publish the images.

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 its 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.
4. Once your image is selected, you can change the image filename by typing in the Image Filename field.
   1. The title will be the name of the file from your computer with any capital letters made lowercase and spaces or other characters changed to hyphens.
   2. When the gadget saves your cropped images the image type name will be added to the end of your Title.
5. Check one or more boxes for the image size(s) you want to create. You can also select All to crop all image sizes.
6. Click the blue Begin Cropping button
7. A new window will open to allow you to crop each image size you selected.
   1. The image size currently being cropped will be displayed at the top of the page.
   2. Display width and Display height will show you the size of the selected area you are viewing.
   3. If constrain aspect is checked, both the height and width will change proportionally as you adjust the crop size. If it is not checked you can change the height and width independently. If you are cropping the 170 Square, 250 Square, or Personnel image the final image will be scaled to meet the predefined aspect ratio, so unchecking this box for these sizes is not recommended.
   4. Click the User Recommended Aspect button to change the crop box to the recommended ratio listed in the image options table.
   5. Click the Select Whole Image button to select the entire image.
   6. Once you have cropped one square size (170 Square or 250 Square) or one banner size (515 Sub-Banner, 800 Banner, 1024 Feature, or 1600 Feature) you will see a “Use Square Crop” or “Use Banner Crop” button. Selecting this will move and resize the crop box to the same location that was selected in the first size you cropped.
   7. 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. 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.

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. Once selected, you will be able to continue with cropping.

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.
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.

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