The Circular Image component for Retool Apps
A content area to display a circular image.
Circular Image is a preset version of Image. It has been preconfigured with a 50% border radius.
Properties
All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
altText
An accessible description for screen readers.
| Type | string | ||||
| Format | Plain Text | ||||
| Mutability |
|
Examples
"Retool logo."
aspectRatio
The ratio of width-to-height (e.g., 1.3 to use 4:3 ratio).
| Type | number | ||||
| Format | Float | ||||
| Mutability |
|
Examples
1.3
clickable
Whether there is an enabled Click event handler.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
dbBlobId
Self-hosted Retool deployments only. The ID of the uploaded image when srcType is dbBlobId.
| Type | string |
| Mutability | Read-only |
fit
Whether the image is cropped to fit or scaled to fill the width if heightType is fixed.
| Type | string | ||||||
| Mutability |
| ||||||
| Allowed Values |
|
flipHorizontal
Whether the image is flipped horizontally.
| Type | boolean | ||||||
| Mutability |
|
flipVertical
Whether the image is flipped vertically.
| Type | boolean | ||||||
| Mutability |
|
heightType
Whether the height automatically adjusts to fit content or is a fixed size.
| Type | string | ||||||
| Format | Plain Text | ||||||
| Mutability |
| ||||||
| Allowed Values |
| ||||||
| Default | |
hidden
Whether this object is hidden from view.
| Type | boolean | ||||||
| Format | True/False | ||||||
| Mutability |
| ||||||
| Default | |
Examples
true
horizontalAlign
The horizontal alignment of the contents.
| Type | string | ||||||||
| Format | Plain Text | ||||||||
| Mutability |
| ||||||||
| Allowed Values |
| ||||||||
| Default | |
id
The unique identifier (name).
| Type | string | ||||
| Format | Plain Text | ||||
| Mutability |
| ||||
| Default | |
Examples
query1
button1
isHiddenOnDesktop
Whether to show or hide this object in the desktop layout.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
isHiddenOnMobile
Whether to show or hide this object in the mobile layout.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
maintainSpaceWhenHidden
Whether to take up space on the canvas if hidden is true.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
margin
The amount of margin to render outside.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Mutability |
| |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
4px 8px
retoolFileObject
The file's data when using a file not stored in Retool Storage.
| Type | object |
| Mutability | Read-only |
retoolStorageDynamicInput
Whether retoolStorageFileId is set dynamically.
| Type | string |
| Mutability | Read-only |
retoolStorageFileId
The Retool Storage file ID if srcType is retoolStorageFileId.
| Type | string | ||||
| Mutability |
|
retoolStorageShowLegacyFiles
Whether to show legacy files in the file picker.
| Type | boolean | ||||
| Mutability |
|
showInEditor
Whether the component remains visible in the editor if hidden is true.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
srcType
The source type.
| Type | string | ||||||||||||
| Mutability |
| ||||||||||||
| Allowed Values |
|
storageBlobId
The ID of the uploaded image when srcType is storageBlobId.
| Type | string |
| Format | Blob URI |
| Mutability | Read-only |
style
Custom style options.
| Type | object | ||||
| Mutability |
|
Methods
JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
circularImage.scrollIntoView()
Scrolls the canvas or parent container so that the selected component appears in the visible area.
circularImage.scrollIntoView(options)
Parameters
Object Properties
behavior
The scroll behavior.
| Type | string | ||||||
| Allowed Values |
|
block
The scroll position relative to the component.
| Type | string | ||||||||||
| Allowed Values |
|
Examples
Scroll the minimum amount to immediately bring circularImage into view.
circularImage.scrollIntoView({behavior: 'auto', block: 'nearest'});
circularImage.setDisabled()
Set the disabled value to toggle whether the input field is disabled. Defaults to true without a parameter.
circularImage.setDisabled(disabled)
Parameters
disabled
Whether input, interaction, selection, or triggering is disabled.
| Type | boolean |
| Format | True/False |
| Default | |
Examples
true
Examples
Disable circularImage.
circularImage.setDisabled(true);
Enable circularImage.
circularImage.setDisabled(false);
circularImage.setFlipHorizontal()
Set the flipHorizontal value to toggle whether the component is flipped horizontally.
circularImage.setFlipHorizontal(flipHorizontal)
circularImage.setFlipVertical()
Set the flipVertical value to toggle whether the component is flipped vertically.
circularImage.setFlipVertical(flipVertical)
circularImage.setHidden()
Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.
circularImage.setHidden(hidden)
Parameters
Examples
true
Examples
Hide circularImage.
circularImage.setHidden(true);
Unhide circularImage.
circularImage.setHidden(false);
circularImage.setImageUrl()
Set the URL of the image.
circularImage.setImageUrl(src)
Events
Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.
| Event | Description |
|---|---|
| Click | An item is clicked or pressed. |