Javascript Actions/Filters

image_hopper_filepond_config(config, FilePond, $form, currentPage, formId, fieldId, entryId, files, fileInput)

This filter allows you to manipulate the FilePond instance configuration, and when the Image Editor is enabled config.imageEditor is made available and holds the Pintura instance, allowing you to adjust its properties on demand.

Parameters:

• config {object} – The FilePond configuration object, which accepts all the properties listed in the FilePond instance documentation. The config.imageEditor object will accept any of the properties listed in the Pintura instance documentation.
• FilePond {object} – The FilePond public API object.
• $form {object} – A jQuery object matching the encompassing Gravity Forms <form> element.
• currentPage {int} – The current page number of the Gravity Forms form.
• formId {int} – The Gravity Forms form ID.
• fieldId {int} – The Image Hopper field ID.
• entryId {int} – The Gravity Forms entry ID (if one exists).
• files {array} – A list of the files already uploaded at the time of initialisation.
• fileInput {object} – The <input type="file"> object currently being Image Hopper’d.

Examples

• Set image aspect ratio (1:1)
• Offer multiple aspect ratio presets
• Allow cropping outside the image boundary
• Change the image preview height
• Add a stickers feature
• Add a frame feature
• Add a circular crop overlay
• Apply a circular mask on save
• Set annotate editor defaults
• Add a text watermark automatically
• Add an image watermark automatically

Usage

While you could create a separate JavaScript file and enqueue it when your desired Gravity Forms form is displayed, it is far easier to add an HTML field to your form and wrap the filter in <script type="text/javascript"></script> tags.

Additional Info

You can manipulate any of the properties listed in the Pintura documentation. It is also worth pointing out that Pintura is integrated directly into FilePond and most of the Pintura options are set through config.imageEditor.editorOptions.