Designer Use Guide

1. Browsing & Filtering Assets

As your project grows, finding the right image is essential. The built-in manager features a real-time Search Filter located at the top of the interface.

• Search: Simply type a partial filename to filter the visible assets. The view updates after clicking the "Filter" button.
• Selection: Clicking an image selects it for your current selected image ( canvas ), while selecting "Edit" opens the advanced editor.

2. Professional Editing

Fliddo integrates the an image manipulation program, providing a desktop-class editing experience directly within the Asset Manager popup.

Select an image and click Edit to access these features:

• Crop & Rotate: Perfect for ensuring your images fit the aspect ratios of your Orange (Loop) cards.
• Filters: Apply professional color grading, grayscale, or sepia effects to maintain a consistent brand aesthetic.
• Draw & Text: Add annotations or shapes directly onto the asset.
• Icon & Shape Masks: Mask your photos into circles or custom shapes without writing custom CSS.

3. Asset Mapping

Once an image is managed in the Asset Manager, it can be tied to your design in two ways:

1. Static Selection: Directly pick an image to fill an <img> tag or a background-image property.
2. Dynamic Binding: Use a maple variable { VarName } syntax in the component settings to pull an image URL from your data source ( e.g., { item.thumbnail } ).