Introduction
In The Digital Bell, there are currently two separate sets of editing tools that can be used to modify your images. Which set you will use is dependant on whether the Cloudinary service has been enabled on your site. Sites with this service enabled will have access to the Cloudinary suite of image editing tools, while the Digital Bell's built-in image cropping feature is available for the sites that are not using this service.
This tutorial will explain how to use Cloudinary to crop or edit your files. If Cloudinary has not been enabled, see "Cropping Images" to learn how to use The Digital Bell's built-in cropping tool.
Using Cloudinary to Edit Images
- Navigate to the Image
- Selecting an Image Size
- Working with the Cloudinary Editing Application
- Available Editing Tools
- Navigate to the Image
-
After logging into The Digital Bell, mouse over the "Warehouse" link, located in the menu at the top of any Digital Bell page. In the drop-down menu, mouse over the "Files" link to create a second drop-down menu. In this menu, click the "Images" link. This will bring you to a list of the existing images in your Warehouse.
Return to Top
Next, locate the appropriate image and click the Edit button (pencil icon) to the left. This will bring you to the "Edit Image" page. Here, you will see a list of the image's Image Sizes. - Selecting an Image Size
-
Selecting an Image Size
When an image is uploaded to the Digital Bell, several different copies of that image are automatically created by Cloudinary. A copy of the image is created for each Image Size your site uses.
A list of the Image Sizes your site uses can be viewed in the right sidebar of the "Edit Image" page, and each size is edited independantly of the others. For example, the "Featured" Image Size can be edited and cropped, while the remaining Image Sizes can be left unedited, or modified in different ways.
Before using the editing application, first determine which Image Size should be modified. For example, if you will be cropping the "Featured" version of the image that appears on the home page, locate the "Featured" Image Size - likewise, if you will be editing the version of the image that appears in a photo gallery, click the "Photo Gallery" link. Once you have located the appropriate size, click the "Image Editor" button below.
Return to Top - Working with the Cloudinary Editing Application
-
After clicking the button, the application will open. You may need to perform an inital crop, if you image is too large or small for the selected Image Size. If you image is sized appropriately and the auto-crop does not appear, please proceed to the next section.
The original resolution of the image will determine whether the image will need to be cropped before it can be edited. If the original image resolution does not fit within your selected Image Size, the "Crop" tool will be displayed, so that the image can be sized appropriately. Once the image is cropped, or if the original resolutions of the image is appropriate for the selected Image Size, the full toolbar will be displayed.
Images that will need to be cropped first will automatically display the following window:
The highlighted portion of the cropping window is automatically set to the aspect ratio of your selected Image Size. When the image is cropped with this tool, it will be sized to fit its designated application, such as the "Featured" section of the home page or a photo gallery, without any distortion. However, if the original image is smaller than the resolution of the Image Size, the image may appear pixelated on the site.
Click and drag the circular icons to resize the crop window. Once you have positioned the highlighted portion, click the "Apply" button to crop the darkened portion. The image can be saved at this point, or edited further with the full toolbar.
Return to Top - Available Editing Tools
-
When you are ready to proceed with editing you image, the toolbar can be used to perform a variety of functions. See the descriptions below for more information on how the editor can be used.
The full editing toolbar includes the following features:
Blemish - Smooth out sections of the image, based on samples from the surrounding areas.
Color - Modify the overall color, saturation, and hue of the image.
Crop - This tool provides a highlighted box, which can be resized. The darkened portion of the image will be cut, leaving only the highlighted portion.
The box is proportioned to the resolution of the selected Image Size, meaning the resulting image will be sized correctly to fit its designated usage. For example, cropping a "Featured" image with this tool will prevent the cropped image from being "stretched" or "squashed" in the "Featured" section of the home page.
Effects - Apply preset effects to your image.
Enhance - Automatically adjust the color, brightness, and contrast of the image.
Focus - "Focus" a selected section of the image by automatically blurring, or "unfocusing," the remaining portion.
Frames - Apply preset frames to the border of your image.
Lighting - Apply lighting effects, and adjust the brightness and contrast.
Orientation - Flip the image vertically and horizontally.
Overlays - Add preset geometric shapes to the image.
Resize - Shrink the image.
Sharpness - Automatically remove blur and enhance edges.
Stickers - Select and add pre-made "sticker" images.
Vignette - Darken the edges of the image to create a "vignette" effect.
Whiten - Brighten a selected section of the image.
Once you have finished editing the image, click the "Save" button to complete the process, and apply your changes to the selected Image Size.
Return to Top