This feature available on the Pro Plan
Contents
Widget Settings
Display Options
Frame
Visibility
CSS Class
Overview
Use the Image Editor Widget to allow campaign entrants to make slight edits to images they've uploaded to your form as part of an entry. When you have an Image Editor Widget added to your campaign, it appears as a popup by default when the user clicks the Edit icon that appears on the thumbnail of their submitted image.
To add one of these widgets to your campaign, click the Image Editor Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
Note: This widget does not allow you to edit images added to your campaign via the Image Widget or as a background image in the Style Panel.
Widget Settings
The widget settings popup is where you'll make any needed changes to your Image Editor Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Image Editor Widget in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
Display Options
The Display Options link on the left contains your main settings for this widget.
The Auto load image into editor checkbox allows you to decide whether or not a submitted image (from the Form Widget) is automatically loaded into the Image Editor Widget upon upload. This really only makes a difference if you have the Image Editor set to Normal visibility instead of having it in a pop-up. Without this box checked, your visitor will need to click the edit icon on the submitted image's thumbnail to have it appear in the Image Editor - it will remain blank until then.
You can edit the Editor Height using the provided field - the default is 400 pixels.
Below, you can select/reorganize which editing buttons (Crop, Flip, Rotate, Undo/Redo, and Frame) you'd like to include - all but the Frame tool are selected by default. Check the box to include the button, and uncheck it to leave it out.
To reorganize the order in which the buttons are shown; click and hold the icon for the button you'd like to move, then drag the button into its new position in the list. In the image editor, the buttons will show from left to right, in order from the top of the list down.
A couple of the editing buttons have additional options, available by clicking the corresponding edit icon:
Rotate
In the additional options for the Rotate tool, you can decide exactly how much the image is turned when either rotate button is clicked in the editor. Add your custom value in degrees into the Rotation Angle (Counterclockwise and Clockwise) fields provided.
Frame
The Frame tool allows you to upload custom frames that can be placed over the top of the submitted image. As the tool's options note, the frames appear as an overlay above the uploaded image, and the file type should be .png or .gif with some transparent space for the uploaded image to show through.
To add your frames, click on the + icon, and your Media Library will appear in a pop-up.
From there, add your frame image to the Media Library like you would any other image. For more information on how to add images to this library, check out the Media Manager help doc.
When you've added the frame(s) you want to include, make sure they're all selected, then click the Use Selected button.
Your selected frame(s) will then show in the options for the Frame tool. Then, click Save and Exit at the bottom to close the settings pop-up.
When you have a single frame set up, your Image Editor Widget will automatically add the frame to the uploaded image.
When you have multiple frames to choose from, the frames will appear below the image in the editor, and your visitor can click to select the frame they'd like to add.
Visibility
If you'd like to limit visibility of the widget to a specific date and time, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
CSS Class
In this section, you can add a CSS Class that will be associated with this Rich Text Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.