Here is a simple example on how you can add the image content tag
<sf-image3
id=":1"
width="400"
height="300"
adjustable="true"
></sf-image3>
Once the user uploads an image the output will be a simple img tag.
<img src="...">
There is of course a lot of more possibilities with this tag.
Adjustable
When you specify adjustable="true" it allows user to choose mode (fill, fit or crop) for their image. It also enables the user to resize the image when using fit or crop.
Turning adjustable off will force the system to crop the image to the specified width/height. If you only want the user to be able to choose between certain mode, such as fill or crop you can defined adjustable="fill,crop"
<sf-image3
id=":1"
width="400"
height="300"
adjustable="true"
resizable="false"
></sf-image3>
If a user upload an image that is 200x120 it will be upscaled to 400x300. If a user uploads an image that is 1423x503 it will be resized and cropped to fit 400x300. We use a smart algorithm to detect interesting details in the image to make the crop as good as possible. Users might also change the crop after upload.
Image as background
It is possible to output the image as a background in a <div> instead of an <img>.
<sf-image3
id=":1"
width="400"
height="300"
adjustable="fill,crop"
resizable="false"
>
<div class="{{ edit }}" style="{{ style }}"></div>
</sf-image3>
Attributes
Attribute |
| Example value |
width |
| 500 |
height |
| 500 |
adjustable |
| true, false, fill, crop |
linkable |
| true, false |
resizable |
| true, false |
resolution |
| 2x |
link-tab |
| video |
placeholder |
| round |
placeholder-width |
| 300 |
placeholder-height |
| 300 |
When your image is rounded we recommend setting placeholder="round" which removes the border and makes the placeholder look better.