Configure the controls to edit an image.
Appears in#
├── _inputs
│ └── *
│ └── Rich Text Input
│ └── options
│ └── image_options
└── _editables
├── content
│ └── image_options
└── block
└── image_optionsType#
Object
Properties#
This key defines the input for an image's alternative text.
Appears in: _inputs.*, link_options, image_options.
Show examplesHide examples
In this example, we have configured the alt input with a custom label, comment, and placeholder.
_editables:
content:
image_options:
alt:
type: text
label: Alt text
comment: Describes the image for screen readers
options:
placeholder: A short description of the image{
"_editables": {
"content": {
"image_options": {
"alt": {
"type": "text",
"label": "Alt text",
"comment": "Describes the image for screen readers",
"options": {
"placeholder": "A short description of the image"
}
}
}
}
}
}This key defines the input for toggling lazy loading on an image.
Appears in: _inputs.*, link_options, image_options.
Show examplesHide examples
In this example, we have configured the loading input with a custom label and comment.
_editables:
content:
image_options:
loading:
type: switch
label: Lazy load
comment: Toggle lazy loading for this image{
"_editables": {
"content": {
"image_options": {
"loading": {
"type": "switch",
"label": "Lazy load",
"comment": "Toggle lazy loading for this image"
}
}
}
}
}This key defines the input for the image file displayed.
Appears in: link_options, image_options, _inputs.*.
Show examplesHide examples
In this example, we have configured the src input with a custom label, comment, and accepted file types.
_editables:
content:
image_options:
src:
type: url
label: Image file
comment: The image file to display
options:
accepts_mime_types:
- image/png
- image/jpeg{
"_editables": {
"content": {
"image_options": {
"src": {
"type": "url",
"label": "Image file",
"comment": "The image file to display",
"options": {
"accepts_mime_types": [
"image/png",
"image/jpeg"
]
}
}
}
}
}
}This key defines the input for an image's title text.
Appears in: _inputs.*, link_options, image_options.
Show examplesHide examples
In this example, we have configured the title input with a custom label, comment, and placeholder.
_editables:
content:
image_options:
title:
type: text
label: Title
comment: Tooltip text shown when hovering the image
options:
placeholder: Add a tooltip for this image{
"_editables": {
"content": {
"image_options": {
"title": {
"type": "text",
"label": "Title",
"comment": "Tooltip text shown when hovering the image",
"options": {
"placeholder": "Add a tooltip for this image"
}
}
}
}
}
}