« Back to Add-on Library
Image Cropper
The Image Cropper delivers a professional, user-friendly solution for uploading and cropping images with direct FileMaker container field integration. Built with the powerful Cropper.js library, it provides an intuitive interface with zoom, pan, and circular crop guides—perfect for profile photos, contact management, and any FileMaker workflow requiring polished image editing.
---
## Core Features
### Image Cropping Interface
- Interactive Cropper - Professional image editing with zoom and pan controls
- Circular Crop Guide - Perfect circular crop for profile photos and avatars
- Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- File Selection - Click-to-browse file picker with image preview
- Instant Preview - See the cropped result before saving
### FileMaker Integration
- Direct Upload - Upload cropped images directly to FileMaker container fields via Data API
- Configurable Connection - Set default layout and container field names in admin settings
- URL Parameters - Override settings per-page with ?record_id=123&layout=Contacts&field=Photo
- AJAX Updates - Instant image updates without page refresh
- Error Handling - Comprehensive error checking with detailed logging
- Demo Database Mode - Test with demo credentials (FM_HOST_DEMO) without affecting production
### Admin Configuration
- Settings Page - Professional admin interface with tabbed organization
- FileMaker Setup - Configure default layout, container field, and record ID
- Output Dimensions - Set custom width and height for cropped images (default: 500×500)
- Demo Mode Toggle - AJAX-powered toggle switch for instant activation of demo database
- Developer Documentation - Built-in guide for integrating cropper into custom projects
- CodeMirror Integration - Syntax-highlighted code examples for developers
### Requirements
✓ WordPress 5.8 or higher
✓ CWP Snippets Pro plugin installed
✓ PHP 7.4 or higher
✓ FileMaker Server with Data API enabled
✓ FileMaker container field configured for "File" storage (not "Reference")
✓ fmCWP class available (included with CWP Snippets)
### Security
All operations are protected with enterprise-grade security:
- Nonce Verification - All AJAX requests require valid WordPress nonces
- File Type Validation - Only JPG, PNG, and GIF files accepted
- Capability Checking - Admin settings require manage_options capability
- Input Sanitization - All user inputs sanitized before processing
- Error Handling - Comprehensive error checking with cwpLog integration
- Secure Credentials - FileMaker credentials stored securely in WordPress constants
---
## Use Cases
### Profile Photo Management
Perfect for user profile systems where users need to upload and crop their own photos:
- Users upload a photo from their device
- Cropper displays with circular guide for perfect profile framing
- Zoom and pan to position the photo exactly right
- Crop and save directly to FileMaker contact record
- Instant display update with the new cropped photo
### Contact Management Systems
Integrate into FileMaker-powered contact management workflows:
- Each contact can have a professionally cropped photo
- Standardized image dimensions ensure consistent display
- Direct upload to FileMaker container fields via Data API
- URL parameters allow dynamic record ID from contact detail pages
- Demo mode lets you test without affecting production contacts
### Multi-Use Image Management
The Image Cropper is flexible enough for many scenarios:
- Employee directories with consistent photo sizing
- Product image uploads with specific dimensions
- Document photos that need cropping (business cards, receipts)
- Any FileMaker workflow requiring professional image editing
- Customer portals where users manage their own images
---
## Developer Integration
The Image Cropper is built as a reference implementation that can be extracted and integrated into custom projects.
### What Developers Can Extract
Frontend Components:
- HTML structure (image display area, modal, file input, buttons)
- JavaScript initialization (Cropper.js configuration with circular guide)
- AJAX handlers (fetch existing image, upload cropped image)
- CSS styling (modal overlay, cropper container, circular crop guide)
Backend Functions:
- FileMaker fetch handler (retrieve existing image from container field)
- FileMaker upload handler (save cropped image to container field)
- Settings management (WordPress Settings API patterns)
- WordPress AJAX action registration
Integration Patterns:
The Setup and Usage tab in the admin page provides:
- Complete code examples for all components
- Step-by-step integration instructions
- Project-specific customization checklist
- Generic examples (no internal references)
### Customization Options
Aspect Ratio:
Change from circular (1:1) to landscape (16:9), portrait (9:16), or any custom ratio by modifying the Cropper.js initialization.
Crop Shape:
Switch from circular to square crop by removing the border-radius CSS on the crop guide.
Output Dimensions:
Configure any output size through the admin settings (minimum: 50×50, recommended: 500×500 or higher).
Output Quality:
Adjust JPEG compression quality in the canvas.toBlob() call (0.0 to 1.0, default: 0.9).
---
## What's Included
✓ Image Cropper (Snippet) - Front-end widget with complete cropping interface
✓ Image Cropper Admin (Function) - Professional settings page with tabs and documentation
✓ Cropper.js Integration - Industry-standard image cropping library (v1.5.13)
✓ FileMaker Upload Handlers - Complete AJAX infrastructure for container field operations
✓ Demo Database Mode - Safe testing environment with toggle switch
✓ URL Parameter Support - Dynamic configuration without changing settings
✓ Developer Guide - Complete integration documentation with code examples
✓ Security Implementation - Nonces, sanitization, validation, and error handling
---
## Ideal For
WordPress Developers:
- Building user profile systems with image uploads
- Creating FileMaker-integrated contact management interfaces
- Developing custom admin pages with image cropping
- Integrating professional image editing into existing projects
FileMaker Developers:
- Adding web-based photo upload to FileMaker solutions
- Building customer portals with profile photo management
- Creating data entry interfaces that include image uploads
- Modernizing FileMaker systems with web components
Website Owners:
- Providing users with a professional image upload experience
- Ensuring consistent image dimensions across the site
- Managing profile photos for membership systems
- Creating employee directories with standardized photos
---
Perfect for any WordPress + FileMaker project requiring professional image cropping with direct container field integration.
---
## Core Features
### Image Cropping Interface
- Interactive Cropper - Professional image editing with zoom and pan controls
- Circular Crop Guide - Perfect circular crop for profile photos and avatars
- Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- File Selection - Click-to-browse file picker with image preview
- Instant Preview - See the cropped result before saving
### FileMaker Integration
- Direct Upload - Upload cropped images directly to FileMaker container fields via Data API
- Configurable Connection - Set default layout and container field names in admin settings
- URL Parameters - Override settings per-page with ?record_id=123&layout=Contacts&field=Photo
- AJAX Updates - Instant image updates without page refresh
- Error Handling - Comprehensive error checking with detailed logging
- Demo Database Mode - Test with demo credentials (FM_HOST_DEMO) without affecting production
### Admin Configuration
- Settings Page - Professional admin interface with tabbed organization
- FileMaker Setup - Configure default layout, container field, and record ID
- Output Dimensions - Set custom width and height for cropped images (default: 500×500)
- Demo Mode Toggle - AJAX-powered toggle switch for instant activation of demo database
- Developer Documentation - Built-in guide for integrating cropper into custom projects
- CodeMirror Integration - Syntax-highlighted code examples for developers
### Requirements
✓ WordPress 5.8 or higher
✓ CWP Snippets Pro plugin installed
✓ PHP 7.4 or higher
✓ FileMaker Server with Data API enabled
✓ FileMaker container field configured for "File" storage (not "Reference")
✓ fmCWP class available (included with CWP Snippets)
### Security
All operations are protected with enterprise-grade security:
- Nonce Verification - All AJAX requests require valid WordPress nonces
- File Type Validation - Only JPG, PNG, and GIF files accepted
- Capability Checking - Admin settings require manage_options capability
- Input Sanitization - All user inputs sanitized before processing
- Error Handling - Comprehensive error checking with cwpLog integration
- Secure Credentials - FileMaker credentials stored securely in WordPress constants
---
## Use Cases
### Profile Photo Management
Perfect for user profile systems where users need to upload and crop their own photos:
- Users upload a photo from their device
- Cropper displays with circular guide for perfect profile framing
- Zoom and pan to position the photo exactly right
- Crop and save directly to FileMaker contact record
- Instant display update with the new cropped photo
### Contact Management Systems
Integrate into FileMaker-powered contact management workflows:
- Each contact can have a professionally cropped photo
- Standardized image dimensions ensure consistent display
- Direct upload to FileMaker container fields via Data API
- URL parameters allow dynamic record ID from contact detail pages
- Demo mode lets you test without affecting production contacts
### Multi-Use Image Management
The Image Cropper is flexible enough for many scenarios:
- Employee directories with consistent photo sizing
- Product image uploads with specific dimensions
- Document photos that need cropping (business cards, receipts)
- Any FileMaker workflow requiring professional image editing
- Customer portals where users manage their own images
---
## Developer Integration
The Image Cropper is built as a reference implementation that can be extracted and integrated into custom projects.
### What Developers Can Extract
Frontend Components:
- HTML structure (image display area, modal, file input, buttons)
- JavaScript initialization (Cropper.js configuration with circular guide)
- AJAX handlers (fetch existing image, upload cropped image)
- CSS styling (modal overlay, cropper container, circular crop guide)
Backend Functions:
- FileMaker fetch handler (retrieve existing image from container field)
- FileMaker upload handler (save cropped image to container field)
- Settings management (WordPress Settings API patterns)
- WordPress AJAX action registration
Integration Patterns:
The Setup and Usage tab in the admin page provides:
- Complete code examples for all components
- Step-by-step integration instructions
- Project-specific customization checklist
- Generic examples (no internal references)
### Customization Options
Aspect Ratio:
Change from circular (1:1) to landscape (16:9), portrait (9:16), or any custom ratio by modifying the Cropper.js initialization.
Crop Shape:
Switch from circular to square crop by removing the border-radius CSS on the crop guide.
Output Dimensions:
Configure any output size through the admin settings (minimum: 50×50, recommended: 500×500 or higher).
Output Quality:
Adjust JPEG compression quality in the canvas.toBlob() call (0.0 to 1.0, default: 0.9).
---
## What's Included
✓ Image Cropper (Snippet) - Front-end widget with complete cropping interface
✓ Image Cropper Admin (Function) - Professional settings page with tabs and documentation
✓ Cropper.js Integration - Industry-standard image cropping library (v1.5.13)
✓ FileMaker Upload Handlers - Complete AJAX infrastructure for container field operations
✓ Demo Database Mode - Safe testing environment with toggle switch
✓ URL Parameter Support - Dynamic configuration without changing settings
✓ Developer Guide - Complete integration documentation with code examples
✓ Security Implementation - Nonces, sanitization, validation, and error handling
---
## Ideal For
WordPress Developers:
- Building user profile systems with image uploads
- Creating FileMaker-integrated contact management interfaces
- Developing custom admin pages with image cropping
- Integrating professional image editing into existing projects
FileMaker Developers:
- Adding web-based photo upload to FileMaker solutions
- Building customer portals with profile photo management
- Creating data entry interfaces that include image uploads
- Modernizing FileMaker systems with web components
Website Owners:
- Providing users with a professional image upload experience
- Ensuring consistent image dimensions across the site
- Managing profile photos for membership systems
- Creating employee directories with standardized photos
---
Perfect for any WordPress + FileMaker project requiring professional image cropping with direct container field integration.
Downloads
- Download v1.0.0 image-cropper-1.0.0.zip
