Image Manager Editor

How do I resize an image?

Step 1: Open the Image manager.

Step 2: Click the arrow at the bottom right of the image and select "Edit," it is the third option from the bottom.

Step 3: A new window will pop up. Click "Resize," it is the third icon from the right.

Step 4: Make sure that "Constrain proportions" is checked, it is the checkbox after the "Height" input.

Step 5: Change the Width or Height to be what you want. Changing one will change the other as long as "Constrain proportions" is checked.

Step 6: Click "Apply" to apply the changes.

Step 7: Save the image.

What are some suggested image sizes?

For galleries…

No more than 800 pixels wide.

For content images…

No more than 400 pixels wide. Height isn't as much of an issue here and is really dependent on the length of the content. Just make sure the image isn't significantly longer than the content.

For images that illustrate a point…

Slightly smaller than the module's width. You can guess the width, just keep the width the same for all illustrating images on the same page.

For thumbnail images…

No more than 200 and no less than 50 pixels wide. Thumbnails are usually square, but if you want rectangular, keep the ratio to 1:1.5. So a base size of 50 would mean the image would be 50x75, 100 would be 100x150, etc.

For slideshow images…

This is dependent on your specific slideshow. View the tutorial on the Slideshow module for finding the size to resize images.

How do I resize for a slideshow?

This is dependent on your specific slideshow. View the tutorial on the Slideshow module for finding the size to resize images.

We recommend resizing for width and cropping height.

How do I crop an image?

Step 1: Open the Image manager.

Step 2: Click the arrow at the bottom right of the image and select "Edit," it is the third option from the bottom.

Step 3: A new window will pop up. Click "Crop," it is the third icon from the left.

Step 4: Click and drag to crop the area you want. The area inside the box is what you are saving.
Step 4a: Fill in the height and width of the cropped area by filling in the last two text inputs; select "Constrain proportions" if you want the cropped area to have the same height/width ratio as the unedited image.
Step 4b: Fill in the top and/or left offset of the cropped area by filling in the first two text inputs.

Step 5: Click "Apply" to apply the changes.

Step 6: Save the image.

How do I resize and crop an image?

Step 1: Open the Image manager.

Step 2: Click the arrow at the bottom right of the image and select "Edit," it is the third option from the bottom.

Step 3: Resize the image to the smallest proportion you want it to be.

Tip: If you are working on an image for a slideshow, use the horizontal dimensions.

Step 4: Remember to hit "Apply" after resizing the image.

Step 5: Crop the remainder of the image you want.

Step 6: Remember to hit "Apply" after cropping the image.

Step 7: Save the image.

How do I save an image?

Step 1: Click "Save," it is the first button from the left.

Step 2: Rename the image. Doing this will allow the original file to be reused for various purposes.

Step 3: Click "Save" at the end of the text field. Pressing RETURN will not work.

Why do I always want to save under a new name?

When you save your image under a different filename, and the original image is being used somewhere on your site, the new image can be used independently from it. Also, you can save your original, 12 megapixel image for when you might need different sizes/crops of the same image.

It is recommended that you rename it by simply adding an underscore (_) to the end of the filename with a brief description of why it was changed.
Examples:

  • filename1_sm.jpg
  • filename1_cropped.jpg
  • filename1_slide.jpg

In the example above, we have a smaller image (_sm) for something like a gallery; a cropped image (_cropped) for some detail on the image, or changing the proportions; and an image for use in the site's slideshow (_slide) which has its own rules for height and width.

How do I undo a change I made to an image?

Click "Revert." It is the second icon from the left. This will restore the image to the previously saved version.

How do I rotate an image?

Step 1: Open the Image manager.

Step 2: Click the arrow at the bottom right of the image and select "Edit," it is the third option from the bottom.

Step 3: A new window will pop up. Click "Rotate," it is the first icon from the right.

Step 4: Click the radio button you want for the degree of rotation.

  • 90° ← Rotate clockwise
  • 180° ← Rotate upside-down
  • 270° ← Rotate counter-clockwise

Step 5: Click "Apply" to view the changes.
Step5a: Repeat Step 4 if you make a mistake.

Step 6: Save the image.

How do I flip an image?

Step 1: Open the Image manager.

Step 2: Click the arrow at the bottom right of the image and select "Edit," it is the third option from the bottom.

Step 3: A new window will pop up. Click "Flip," it is the second icon from the right.

Step 4a: Select "Horizontal" to flip the image from right to left.
Step 4b: Select "Vertical" to flip the image from top to bottom.

Step 5: Click "Apply" to apply the changes.

Step 6: Save the image.