Allow users to upload images that fit your design.
Basic Example
<sf-image3
id=":1"
width="400"
height="300"
adjustable="true"
></sf-image3>
Output:
<img src="...">
Key Features
Adjustable Images
When enabled, users can select modes (fill, fit, crop) and resize images. Specific modes can be limited:
<sf-image3 id=":1" adjustable="fill,crop"></sf-image3>
The system uses smart algorithms to detect important image details during cropping.
Background Image Option
Images can render as CSS backgrounds within a <div> rather than as <img> tags.
Available Attributes
Attribute | Description |
| Pixel width (numeric, not "px") |
| Pixel height (numeric, not "px") |
| Boolean or specific modes list |
| Enable image linking |
| Allow height adjustment (10px to specified height) |
| Set to "2x" for high-resolution uploads |
| Default to "video" tab in link modal |
| Set to "round" for circular image preview |
| Custom placeholder width |
| Custom placeholder height |