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 publish the images.

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 no more that 7999 px wide.
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 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.
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 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.

(Video has no sound.)

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 banner image on a page with MultiEdit Content.