Image Block – a picture or an icon¶
The image block shows a picture or an icon. Which one is decided by an image expression, so the picture can follow the record – a product photo, a state icon, a logo.
This page is part of the form block reference.
1. At a glance¶
| Purpose | Shows a picture or an icon, optionally clickable |
| Typical use | Product photo, logo, an icon that reflects the state of the record |
| Related | Avatar Block, Images, Icon fonts |
2. Settings¶
| Setting | Meaning | Default / required |
|---|---|---|
| "Image" | The picture or icon, as an image expression | Required. Without it the block shows nothing. |
| "Alt Text" | Alternative text of the picture | the alt text the image itself carries |
| "Image Fit" | How a picture is fitted into the size of the block: Contain, Cover, Fill, ScaleDown, None | Default |
| "Icon Size" (Size) | Size of an icon as a CSS length (32px) |
see below |
| "Click Action" | Action run when the image is clicked | none |
In addition, the block has the settings every block has, except "Flush".
3. Behaviour¶
- A picture follows the width and height of the block; "Image Fit" decides whether it is cut, stretched or letterboxed.
- An icon is a character of an icon font and follows a font size, not a box. Its size is "Icon Size"; without it, the height of the block; without that, its width; without any of them, the default icon size.
4. Examples¶
Product photo. "Image" = the picture field of the product, "Size" width 100% and height
240px, "Image Fit" = Cover. Pictures of every format fill the area without being distorted.
State icon. "Image" = an expression that returns a check icon for "Resolved" and a warning icon
for "Escalated", "Icon Size" = 28px, "Text Color" green or red accordingly.