GabrielSoft - How to crop and resize images

When you add photos to your website, the original image may need to be cropped or resized to fit a specific area on your site. There are two ways that you can easily crop and resize your images, depending on what module it appears in: 

• Images used in a Button or Image Module can be edited using the standard Image Editing Tools.
• Images used in Events, News, Text/HTML, and People Modules can be edited using the Image Cropper.

Below, you will find instructions for each of the tools.

How to use the standard Image Editing Tools

Here are the steps (and tools) you'll need to crop your images using the standard Image Editing Tools.

The standard Image Editing Tools are located in the top right of the Button and Image Modules (pictured below).

When you first upload your image to a Button or Image Module, it will be intuitively placed so that the image will fill the entire module. Depending on the size of your image, it may appear as if your image was cropped during the upload, however, the entire image remains in the module. Because your whole image (although partially hidden) remains in the module, the following tools will allow you to crop and resize your images within each module to create a perfect picture, every time.

1

Use the Directional Cursor to move / reposition the image

This tool allows you to move / reposition the visible area of your image. In order to use the Directional Cursor, you must first select the tool in the top right of the module. You will know the Directional Cursor is ready to be used when the icon is highlighted in blue (pictured below).

HINT: If your Directional Cursor is activated (highlighted in blue), but you are not able to drag your image around inside the module, that means the entire image is visible and cannot be "zoomed out" anymore.

2

Use the Zoom In/Out features to adjust the visible area of the image.

These tools allow you to adjust the visible area of your image, by zooming in and out of the focal point of your image. When you use these tools, your entire image will remain in the module, although you cannot see the entire image (pictured below).

To save any adjustments you've made to your images, you must publish your web page by clicking the green Publish button.

How to use the Image Cropper

Here are the steps (and tools) you'll need to crop your images in the Image Cropper.

1

Use the Crop Handles to set the photo's dimensions

Here's the first step to cropping your photo: Click and drag the Crop Handles to set the width and height of the image (illustrated below). As you drag the Crop Handles, the photo's width and height values (measured in pixels) will update in real-time in the top right corner of the Image Cropper.

HINT: If you know the specific dimensions at which you want to crop the photo, just click inside the width or height value area, delete the current value, and type your desired dimensions.

Aspect Ratio Lock icon

Before cropping, you may want to click the Lock icon (located in the upper right corner of the cropper) to lock the image's Aspect Ratio as you crop.

• LOCKED: When the Aspect Ratio Lock icon is toggled on/locked, the image's ratio of width vs. height will be locked whenever you drag the Crop Handles. (In most cases, it is best to make sure the Lock icon is on.)
• UNLOCKED: When the Aspect Ratio Lock icon is toggled off/unlocked, the Crop Handles are free-moving; you can change the dimensions of the photo without restriction.

2

Click and drag the photo to position it within the crop area

Next, click and drag the image itself to reposition it within the crop area (illustrated below). The unshaded portion of the photo will be visible on your website once you save the crop.

3

Use the slider to shrink or enlarge the photo

If necessary, drag the Resize Slider at the top of the Image Cropper to shrink or enlarge the portion of the image that will be visible (illustrated below).

Finally, click the green Save button at the bottom of the cropper to save your work.