#419 Image field#441
Open
reygcalantaol wants to merge 3 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new Image custom field type to WP User Manager forms, using FilePond to provide an enhanced upload UI and preview behavior.
Changes:
- Registers a new
imagefield type and template for WPUM custom fields. - Enqueues FilePond assets and initializes FilePond on image inputs.
- Updates Grunt build steps to bundle FilePond scripts/styles.
Reviewed changes
Copilot reviewed 7 out of 18 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
templates/form-fields/image-field.php |
New image field template that outputs the <input type="file"> and passes FilePond config via data attributes. |
includes/fields/types/class-wpum-field-image.php |
New field type class extending the existing file field behavior for image-specific handling/output. |
includes/fields/class-wpum-fields.php |
Registers image in the field loader list so the type becomes available. |
includes/assets.php |
Enqueues FilePond bundle + CSS and the WPUM FilePond initializer script on relevant frontend pages. |
assets/js/src/wpum-filepond.js |
FilePond initializer for WPUM image fields (source). |
assets/js/wpum-filepond.js / assets/js/wpum-filepond.min.js |
Built artifacts for the initializer script. |
assets/js/vendor/filepond/* |
Local vendor copies of FilePond core + plugins (inputs to bundling). |
assets/css/vendor/filepond/* and assets/css/vendor/filepond.css |
Local vendor CSS and bundled CSS. |
Gruntfile.js |
Adds concat/uglify targets for FilePond bundles and the new initializer script. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+10
to
+31
| function parseFileTypes(types) { | ||
| if (!types) { | ||
| return ['image/*']; | ||
| } | ||
|
|
||
| var result = []; | ||
|
|
||
| types.split('|').forEach(function (type) { | ||
| type = type.trim().toLowerCase(); | ||
|
|
||
| if (!type) { | ||
| return; | ||
| } | ||
|
|
||
| if (type.indexOf('/') !== -1) { | ||
| result.push(type); | ||
| } else { | ||
| result.push('image/' + type); | ||
| } | ||
| }); | ||
|
|
||
| return result; |
Comment on lines
+48
to
+83
| // Register only the plugins that are available. | ||
| var plugins = [ | ||
| window.FilePondPluginImagePreview, | ||
| window.FilePondPluginFileValidateType, | ||
| window.FilePondPluginFileValidateSize | ||
| ].filter(function (plugin) { | ||
| return !!plugin; | ||
| }); | ||
|
|
||
| if (plugins.length) { | ||
| FilePond.registerPlugin.apply(FilePond, plugins); | ||
| } | ||
|
|
||
| $(imageFields).each(function () { | ||
| const $input = $(this); | ||
|
|
||
| // Prevent double initialization. | ||
| if ($input.hasClass('filepond--root')) { | ||
| return; | ||
| } | ||
|
|
||
| const fileTypes = parseFileTypes($input.data('file_types')); | ||
| const wrapper = $input.closest('fieldset'); | ||
| const fileUrl = $(wrapper).find('input[name="' + 'current_' + $input.attr('name') + '"]').val(); | ||
|
|
||
| $input.filepond({ | ||
| acceptedFileTypes: fileTypes, | ||
| allowFileSizeValidation: true, | ||
| allowFileTypeValidation: true, | ||
| allowImagePreview: true, | ||
| allowMultiple: false, | ||
| credits: false, | ||
| maxFileSize: $input.data('file_size'), | ||
| required: $input.prop('required'), | ||
| storeAsFile: true, | ||
|
|
Comment on lines
+68
to
+73
| wp_enqueue_style( 'filepond-style', WPUM_PLUGIN_URL . 'assets/css/vendor/filepond.css', false, WPUM_VERSION ); | ||
| wp_enqueue_script( 'filepond-js', WPUM_PLUGIN_URL . 'assets/js/vendor/filepond-bundle.min.js', array( 'jquery' ), WPUM_VERSION, true ); | ||
|
|
||
| $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min'; | ||
| wp_enqueue_script( 'wpum-frontend-js', WPUM_PLUGIN_URL . 'assets/js/wp-user-manager' . $suffix . '.js', array( 'jquery' ), WPUM_VERSION, true ); | ||
| wp_enqueue_script( 'wpum-filepond-js', WPUM_PLUGIN_URL . 'assets/js/wpum-filepond' . $suffix . '.js', array( 'jquery', 'filepond-js' ), WPUM_VERSION, true ); |
| $current_image = ''; | ||
|
|
||
| if ( is_numeric( $data->value ) ) { | ||
| $current_image = wp_get_attachment_image_src( absint( $data->value ) )[0] ?? ''; |
Comment on lines
+3
to
+5
| * The template for displaying the file field. | ||
| * | ||
| * This template can be overridden by copying it to yourtheme/wpum/form-fields/file-field.php |
|
|
||
| $extension = substr( strrchr( $image_src, '.' ), 1 ); | ||
| $file_type = wp_ext2type( $extension ); | ||
| $value = '<span class="wpum-uploaded-image-name"><img src="' . $image_src . '"></span>'; |
Comment on lines
+99
to
+103
| $extension = substr( strrchr( $image_src, '.' ), 1 ); | ||
| $file_type = wp_ext2type( $extension ); | ||
| $value = '<span class="wpum-uploaded-image-name"><img src="' . $image_src . '"></span>'; | ||
|
|
||
| return $value; |
| 'assets/js/vendor/filepond/filepond.min.js', | ||
| 'assets/js/vendor/filepond/filepond.jquery.js', | ||
| 'assets/js/vendor/filepond/filepond-plugin-file-validate-type.min.js', | ||
| 'assets/js/vendor/filepond/filepond-plugin-file-validate-size.min.js', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #419
What Changed
Adds a new Image field type to WP User Manager custom fields, powered by the FilePond uploader.
How It Works
This PR adds a new Image field type to WPUM using FilePond to replace the default file input with a much better upload experience.
Files Changes
includes/assets.php- Enqueues all the FilePond scripts and styles so the uploader works properly.includes/fields/class-wpum-fields.php- Registers the new image field type so it shows up in WPUM custom fields.Gruntfile.js- Updated to bundle FilePond and its plugins into one build.Files Added
includes/fields/types/class-wpum-field-image.php- Main logic for the image field.templates/form-fields/image-field.php- Outputs the field markup and passes data needed for FilePond.JS
assets/js/src/wpum-filepond.js - Initializes FilePond, handles default images, and keeps things in sync when users add/remove images.
FilePond assets (local copies)
CSS:
assets/css/vendor/filepond.cssassets/css/vendor/filepond/filepond-plugin-image-preview.min.cssassets/css/vendor/filepond/filepond.min.cssJS:
assets/js/vendor/filepond/filepond.min.jsassets/js/vendor/filepond/filepond.jquery.jsassets/js/vendor/filepond/filepond-plugin-file-validate-type.min.jsassets/js/vendor/filepond/filepond-plugin-image-preview.min.jsassets/js/vendor/filepond/filepond-plugin-image-validate-size.min.jsTesting Instructions
Steps for a reviewer to verify this works:
Users -> Custom FieldsPrimary FieldsAdd new custom fieldAdvanced Fieldstab, enter field and click,ImageSave ChangesUsers -> Registration Forms, editDefault Registration FormImagefield to form fields.Registerpage (http://domain.com/register) and register new user.Note:
When testing on the #419-Image-Field branch, you may notice that in step 4 the image does not have a name. This is expected and is caused by the updated field naming implementation introduced in #405 to fix the translation issue.
Test Coverage
tests/wpunit/vendor/bin/codecept run wpunitorvendor/bin/phpunit)Tests Performed
Screenshots
If this changes any UI, add before/after screenshots.
Pre-merge Checklist