Integrated into the Content Apps is Image Picker functionality. For any content app in which an image can be specified, the Image Picker will be displayed. To specify or change an image, clicking “Select Image” will open the image picker modal. Remove Image will remove the current image.
The Image Picker modal window contains the list of libraries/folders in the left hand pane that have been enabled for the content app. Selecting an image library or folder will display the images available. The desired image can be selected and then the “Save” button clicked to add the image to the content app. Also, a new image can be uploaded to be added to the library.
In some cases, however, there may be a need to adjust an image to fit the desired use. The Image Picker includes the ability to crop and/or resize an image. The following describes how to edit an existing image in the library, but it can also be applied to editing an image curing the upload process as well.
To Edit an existing image, select the image (1) and click on the “Edit” button (2) to open the editing interface.
The left image shows the initial image editing interface. The image can be scaled using the Width and Height parameters (locked or unlocked) before or after cropping. To crop the image, simply click and drag the cursor within the image (1) to set the crop box size. The current crop box size is dynamically displayed in the Selection Size (2) as you create it.
NOTE: If “Image Field Validation”, which sets the required size for the image, is enabled in the Content App Settings for the current app, the crop box will automatically be set to that required size once you click on the image.
Once the crop box size is set, its location can be adjusted if necessary by clicking on a dragging the crop box to the desired location (1). When completed, add a name for the new image into the “Save As:” box and click on the save button. All images are automatically saved as .jpg images.
The newly created image will appear first in the list in the Image Picker for easy selection. Select the image and click on save to add it to the current content item.
The same image editing can also be applied to images being uploaded. The “Edit” button will appear once you have selected a file for upload.