Image Editor
WP Stories includes a built-in image editor powered by TUI Image Editor, wrapped in a Vue.js component. This editor allows users to modify their story images before uploading, directly within the story creation form.
Architecture
Section titled “Architecture”The image editor is a Vue.js 2.x application that wraps the TUI Image Editor library. It integrates with FilePond (the file upload component) so that users can edit images inline during the upload process.
Dependencies
Section titled “Dependencies”| Library | Version | Purpose |
|---|---|---|
| Vue.js | 2.6.14 | Component framework for the editor UI |
| TUI Image Editor | 3.15+ | Core image editing engine |
| Fabric.js | 4.2.0 | Canvas rendering (required by TUI) |
| TUI Color Picker | 2.2.6 | Color selection for drawing and text tools |
| FilePond | – | File upload handling and preview |
Vue.js, Fabric.js, and TUI Color Picker are loaded from CDNs. TUI Image Editor and FilePond are bundled with the plugin.
Editor Features
Section titled “Editor Features”The image editor supports the following tools:
- Crop – Select and crop a region of the image.
- Rotate – Rotate the image by arbitrary angles.
- Flip – Flip the image horizontally or vertically.
- Draw – Freehand drawing on the canvas with configurable brush size and color.
- Text – Add text overlays with customizable font size, color, and style.
- Filters – Apply image filters (grayscale, sepia, blur, sharpen, etc.).
- Shapes – Draw rectangles, circles, and triangles with fill and stroke options.
- Icons – Add preset icon overlays to the image.
WPStoriesEditorBridge API
Section titled “WPStoriesEditorBridge API”The plugin exposes a JavaScript bridge object (WPStoriesEditorBridge) that manages communication between FilePond and the TUI Image Editor.
Methods
Section titled “Methods”WPStoriesEditorBridge.open(file, callback)
Opens the image editor with the specified file. The callback receives the edited image data when the user applies their changes.
WPStoriesEditorBridge.close()
Closes the image editor and cleans up resources.
How It Works
Section titled “How It Works”- When a user uploads an image via FilePond, the editor integration detects the file.
- The user can click to edit, which calls
WPStoriesEditorBridge.open()with the uploaded file. - The TUI Image Editor opens in a modal overlay.
- After editing, the user applies changes, and the edited image replaces the original in the upload queue.
- The edited image data is sent to the server when the story form is submitted.
Mobile Support
Section titled “Mobile Support”WP Stories includes a separate mobile-optimized editor build (wp-stories-vue-editor-mobile.js) that is automatically loaded on mobile devices. The plugin detects the device using wp_is_mobile() and loads the appropriate version.
The mobile editor includes:
- Touch-optimized controls
- Responsive layout adjustments
- Simplified toolbar for smaller screens
For development and testing, you can force the mobile editor on desktop by appending ?mobile_preview=1 to the page URL.
Responsive CSS
Section titled “Responsive CSS”Two additional CSS files handle editor display across screen sizes:
wp-stories-vue-editor-responsive.css– Loaded on all devices to handle browser window resizing.wp-stories-vue-editor-mobile.css– Loaded only on mobile devices for touch-specific adjustments.