Image and Media Management
Overview
Flowmo provides a complete set of tools for uploading, replacing, and fine-tuning images and videos on your canvas. From the right sidebar's design panel, you can control source URLs, object fit, positioning, scale, background repeat, and more -- giving you precise control over how media appears in your designs.
Prerequisites
- An active Flowmo project open in the designer.
- An image or video element selected on the canvas.
Image Elements
When you select an image element, the right sidebar displays an Image section with the following controls.
Uploading an Image
- Click the Upload Image button in the Image section.
- Select an image file from your computer (any standard image format is accepted).
- The image is uploaded to your project's asset storage via Firebase and the element's source is automatically updated.
You can also paste a URL directly into the Source field and press Enter.
Source Field
The Source text field displays and accepts the image URL. You can:
- Paste an external URL (e.g., from Unsplash or any CDN).
- View the current asset URL after uploading.
- Edit the URL manually to swap images.
Object Fit
The Object Fit toggle group controls how the image fills its container:
| Option | Behavior |
|---|---|
| Cover | The image fills the entire container, cropping if necessary to maintain aspect ratio |
| Contain | The image fits entirely within the container, potentially leaving empty space |
Position
The Position field controls the focal point of the image within its container. Enter values as percentages (e.g., 50% 50% for center, 0% 0% for top-left, 100% 100% for bottom-right).
Video Elements
When you select a video element, the right sidebar displays a Video section with additional controls.
Uploading a Video
- Click the Upload Video button in the Video section.
- Select a video file from your computer (accepted formats: MP4, WebM, OGG).
- The video is uploaded to your organization's media storage and the source is updated automatically.
A loading indicator appears on the page while the upload is in progress.
Upload Poster
- Click the Upload Poster button to set a thumbnail image that displays before the video plays.
- Select an image file from your computer.
- The poster image is uploaded and applied to the video element.
Source and Poster Fields
Both the Source and Poster text fields accept URLs. You can paste external video URLs or poster image URLs directly.
Object Fit
Same as images -- toggle between Cover and Contain.
Playback Properties
Videos expose four toggle controls, each with On / Off options:
| Property | What it controls |
|---|---|
| Autoplay | Whether the video starts playing automatically when the page loads |
| Muted | Whether the video audio is muted by default |
| Loop | Whether the video restarts from the beginning when it ends |
| Controls | Whether the browser's native video controls (play/pause, volume, seek) are visible |
A common configuration for background videos is: Autoplay On, Muted On, Loop On, Controls Off.
Background Image Editor (MediaEditor)
When you use an image as a background fill (via the fill/background picker), the MediaEditor provides advanced controls:
Image Preview
A thumbnail preview of the background image is displayed at the top of the editor, maintaining the aspect ratio of the selected element.
Replace Image
Click the Replace image button to upload a new image file. The new image is converted to WebP format and uploaded to your project's assets.
Background Repeat
Toggle between Repeating and No Repeat to control whether the background image tiles.
Position Presets
A 3x3 grid of position presets lets you quickly align the background image:
| Top | 0% 0% | 50% 0% | 100% 0% |
|---|---|---|---|
| Center | 0% 50% | 50% 50% | 100% 50% |
| Bottom | 0% 100% | 50% 100% | 100% 100% |
Click any preset dot to snap the image to that position. The active position is highlighted.
Size Mode
Three size mode options are available:
| Mode | CSS equivalent | Behavior |
|---|---|---|
| Custom | {scale}% auto | Set a specific scale percentage |
| Fill | cover | Image covers the entire element |
| Fit | contain | Image fits entirely within the element |
Scale Slider (Custom mode only)
When Custom is selected, a scale slider and numeric input appear:
- Drag the slider or type a value (range: 0.01 to 10, in 0.01 increments).
- The scale value represents a percentage multiplier (1 = 100%).
Direct Manipulation
You can also adjust the background position by interacting directly with the element on the canvas:
- Right-click and drag on the element to pan the background image.
- Ctrl/Cmd + Mouse Wheel to zoom the background image scale.
Tips
- WebP for performance. When uploading images through the background MediaEditor, files are automatically converted to WebP for optimal web performance.
- Use Cover for hero images. The Cover fit mode ensures your image fills the entire container without gaps -- ideal for hero sections and full-bleed backgrounds.
- Use Contain for logos. The Contain fit mode ensures the entire image is visible -- perfect for logos and icons where cropping is unacceptable.
- Background videos should be muted. Browsers block autoplay of unmuted videos. Always set Muted to On if you want Autoplay to work reliably.
- Poster images improve perceived performance. Upload a poster for video elements so users see a meaningful image while the video loads.
- Combine with stock media. Use the Unsplash & Pexels integration to find images, then fine-tune their fit and position here.
Common Issues
| Problem | Solution |
|---|---|
| Uploaded image does not appear | Check your internet connection. The image is uploaded to Firebase Storage -- a failed upload will not update the source URL. |
| Video does not autoplay | Ensure Muted is set to On. Modern browsers require videos to be muted for autoplay to work. |
| Background image position resets | Make sure to click away or press Enter after editing position values to commit the change. |
| Scale slider has no effect | The scale slider only works when the size mode is set to Custom. Switch from Fill or Fit to Custom to use it. |
| "Image Thumbnail" or "Video Thumbnail" text shown | No image URL is set. Upload an image or paste a URL into the Source field. |
Related Articles
- Unsplash & Pexels: Free Stock Media -- finding and inserting free stock images and videos
- Iconify: Icon Library -- adding SVG icons as image elements
- Photopea: In-Browser Image Editing -- editing images in the browser before uploading
- Spline 3D: Advanced Integration -- embedding interactive 3D content