Skip to content

#419 Image field#441

Open
reygcalantaol wants to merge 3 commits intodevelopfrom
#419-Image-Field
Open

#419 Image field#441
reygcalantaol wants to merge 3 commits intodevelopfrom
#419-Image-Field

Conversation

@reygcalantaol
Copy link
Collaborator

@reygcalantaol reygcalantaol commented Mar 23, 2026

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.css
assets/css/vendor/filepond/filepond-plugin-image-preview.min.css
assets/css/vendor/filepond/filepond.min.css

JS:
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-image-preview.min.js
assets/js/vendor/filepond/filepond-plugin-image-validate-size.min.js

Testing Instructions

Steps for a reviewer to verify this works:

  1. In the WP admin, go to Users -> Custom Fields
  2. Edit on the Primary Fields
  3. Click Add new custom field
  4. In the Advanced Fields tab, enter field and click, Image
  5. Click Save Changes
  6. Go to Users -> Registration Forms, edit Default Registration Form
  7. Drag the Image field to form fields.
  8. Go to Register page (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.

	public function set_name() {
		$this->name = esc_html__( 'Image', 'wp-user-manager' );
	}

Test Coverage

  • Unit tests added/updated in tests/wpunit/
  • E2E test reproduces the bug (for bug fixes) — test fails before fix, passes after
  • Happy path covered
  • Edge cases covered
  • All existing tests still pass (vendor/bin/codecept run wpunit or vendor/bin/phpunit)

Tests Performed

  1. Upload image in registration form.
  2. Upload image in user account page in the frontend.
  3. Upload image in the user profile edit in the backend.

Screenshots

If this changes any UI, add before/after screenshots.

Pre-merge Checklist

  • Acceptance criteria from the linked issue are met
  • Code follows WordPress coding standards (tabs, Yoda conditions, escaping/sanitization)
  • Self-reviewed the diff
  • No new PHP warnings, notices, or deprecations
  • Tested on PHP 7.4 and 8.x (if touching compatibility-sensitive code)
  • Review requested from @polevaultweb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image Field

1 participant