1. Plugin Installation: Access the Bubble Plugin Marketplace and search for "PixelPro Image Editor".
Install the plugin and add the element to the page where you want to implement image editing functionality.
2. Basic Property Configuration:
In the Bubble editor, select the plugin element on your page.
Configure the Mode property by selecting either "inline" (embedded in page) or "overlay" (modal popup).
Set an initial image using the Image URL property or leave blank to allow users to select their own images.
Choose a Theme (light, dark, system, or custom) that best matches your application's design.
3. Visual Customization:
For custom themes, configure color properties including Primary Color, Background Color, and Foreground Base.
Enable the Show Logo option and provide a Logo URL to display your brand within the editor.
Adjust Nav Position to control where navigation tools appear (top, bottom, left, or right).
Set Watermark Text if you need to apply a visible attribution to edited images.
4. Interface Configuration:
Enable or disable UI elements using properties like Show Undo Widget, Show Zoom Widget, and Show History Button.
Configure Show Dropdown Menu and related options to provide additional functionality.
Set Enable Open Image Dialog to allow users to select from sample images or upload their own.
Customize button labels using properties like Label Button Save and Label Done Button.
5. Saving Configuration:
Select the preferred Image Format for saving (png, jpg, or webp).
Set Auto Convert To Bubble URL to automatically convert edited images to Bubble storage URLs.
Configure Auto Select Method and Size Threshold to optimize processing of different image sizes.
Use File Name to set a custom name pattern for saved images or leave blank for automatic naming.
6. Workflow Integration:
Connect the plugin's events (e.g., "Image Saved", "Editor Loaded") to your application workflows.
Use the exposed states (e.g., imagedata, url, filesize) to process edited images.
Implement workflows to handle different processing scenarios based on the using_server_side state.
Set up conditional logic to manage successful conversions or handle failures using the conversion_failed state.
7. Multilingual Support:
Set the Language property to provide a localized experience (English, Spanish, Portuguese, or French).
The plugin will automatically detect browser language if not explicitly set.
Customize text labels to match your application's terminology if needed.

---

1. Server-Side Processing:
For large images (typically over 5MB), configure server-side processing using the Use Server Side property.
Implement a workflow to handle the "useServerSide" event that provides image data for external processing.
Create a backend workflow or API integration to process images that exceed client-side capabilities.
2. Custom Theme Implementation:
When selecting "custom" as the theme, ensure all color properties are properly configured.
Use the Show Theme Buttons property to allow users to switch between themes while editing.
Test your custom theme across different device types to ensure proper contrast and usability.
3. Sample Images Configuration:
Provide a comma-separated list of image URLs in the Sample Images String property.
Ensure thumbnails follow the naming convention of original filenames with "_thumbnail" added before the extension.
Test the sample image selection dialog to verify all images load correctly.
4. Performance Optimization:
Use the inline mode for smaller, simpler editing tasks and overlay mode for full-screen editing experiences.
Configure appropriate image quality and format settings based on your application's needs.
Implement the "editorClosed" event handler to properly clean up resources after editing sessions.

---

[]🛠️ Troubleshooting Help: Solutions for common implementation challenges via our detailed knowledge base.
[]🔄 Regular Updates: Stay current with new features and improvements released periodically.
[]💡 UI/UX Best Practices: Guidelines for creating optimal image editing experiences within your application.
[/list]
More Plugins by ANDAON (BubbleAI Labs)
Explore more powerful Bubble plugins from our team:
🧩 View All Plugins by ANDAON