This plugin allows you to define some properties that will be editable either one by one, or by (visual) presets. You can also define which properties are available for editing.
This plugin allows you to define some properties that will be editable either one by one, or by (visual) presets. You can also define which properties are available for editing.
- DatoCMS Plugin Buzz JSON Options
- Features
- Usage
- Plugin level configuration
- Field level configuration
- Types
!DatoCMS Plugin Buzz JSON Options Preview
1. Multiple input types:
- string: Simple text input
- number: Simple number input
- boolean: Simple switch input
- select: Select input
2. Support presets
- Specify values you want
- Display a preview
- image
- video: Play on hover
- Preview size (aspect ratio and height)
3. Specify what is displayed
- props: Choose with property field is displayed
- presets: Display of not the presets previews
4. Plugin level configuration
5. Field level configuration
- Can extends templates defined in the plugin config for convinience
1. Specify the plugin level configuration
2. Create a JSON field on one of your blocks/models
3. Go to Presentation
4. Choose Buzz JSON options
5. Specify the field level configuration
Here's an example of plugin level configuration:
``json`
{
"settings": {
"presets": {
"display": true,
"preview": {
"aspectRatio": 1.77,
"height": 200
}
},
"props": {
// can be an array of properties ids to display
"display": true
}
},
// specify some templates to extends fields from
"templates": {
"image": {
"settings": {
"preset": {
"display": true
// and other settings...
}
},
"props": {
"animated": {
"type": "boolean",
"label": "Animated",
"default": true
}
}
}
}
}
Here's an example of a field level configuration
`json`
{
// extends from the "image" template
"extends": "image",
// some custom settings
"settings": {
"props": {
"display": ["animated"]
}
},
"presets": [
{
"label": "Animated image",
"values": {
"shape": "square",
"animated": true
},
// can be images or videos
"preview": "https://..."
},
{
"label": "Non animated image",
"values": {
"shape": "circle",
"animated": true
},
// can be images or videos
"preview": "https://..."
}
],
"props": {
"shape": {
"type": "select",
"label": "Shape",
"options": [
{
"label": "Square",
"value": "square"
},
{
"label": "Circle",
"value": "circle"
}
]
}
}
}
Here's the typescript types for convinience
`ts
export type TDatoPluginBuzzOptions = {
settings?: TDatoPluginBuzzOptionsSettings
presets?: Record
props?: Record
extends?: string
}
export type TDatoPluginBuzzOptionsConfig = {
settings?: TDatoPluginBuzzOptionsSettings
templates?: {
[key: string]: TDatoPluginBuzzOptions
}
}
export type TDatoPluginBuzzOptionsPreset = {
label: string
values: {
[key: string]: string | number | boolean
}
preview?: string
}
export type TDatoPluginBuzzOptionsProp =
| {
label: string
type: 'string' | 'number' | 'boolean'
default?: string | number | boolean
}
| {
type: 'string' | 'number' | 'select'
options: {
label: string
value: string | number
}
}
export type TDatoPluginBuzzOptionsSettings = {
debug?: {
togglePropsKey?: boolean
}
presets?: {
display?: boolean
excludeProps?: string[]
preview?: {
aspectRatio: number
height: number
}
}
props: {
display?: boolean | string[]
}
panel?: {
collapsed?: boolean
icon?: string
label?: string
}
}
``