Buzz JSON Options

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 is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

DatoCMS Plugin Buzz JSON Options

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

DatoCMS Plugin Buzz JSON Options Preview

Features

Multiple input types:
- string: Simple text input
- number: Simple number input
- boolean: Simple switch input
- select: Select input
Support presets
- Specify values you want
- Display a preview
  - image
  - video: Play on hover
- Preview size (aspect ratio and height)
Specify what is displayed
- props: Choose with property field is displayed
- presets: Display of not the presets previews
Plugin level configuration
Field level configuration
- Can extends templates defined in the plugin config for convinience

Usage

Specify the plugin level configuration
Create a JSON field on one of your blocks/models
Go to Presentation
Choose Buzz JSON options
Specify the field level configuration

Plugin level configuration

Here's an example of plugin level configuration:

1
{
2
  "settings": {
3
    "presets": {
4
      "display": true,
5
      "preview": {
6
        "aspectRatio": 1.77,
7
        "height": 200
8
      }
9
    },
10
    "props": {
11
      // can be an array of properties ids to display
12
      "display": true
13
    }
14
  },
15
  // specify some templates to extends fields from
16
  "templates": {
17
    "image": {
18
      "settings": {
19
        "preset": {
20
          "display": true
21
          // and other settings...
22
        }
23
      },
24
      "props": {
25
        "animated": {
26
          "type": "boolean",
27
          "label": "Animated",
28
          "default": true
29
        }
30
      }
31
    }
32
  }
33
}

Field level configuration

Here's an example of a field level configuration

1
{
2
  // extends from the "image" template
3
  "extends": "image",
4
  // some custom settings
5
  "settings": {
6
    "props": {
7
      "display": ["animated"]
8
    }
9
  },
10
  "presets": [
11
    {
12
      "label": "Animated image",
13
      "values": {
14
        "shape": "square",
15
        "animated": true
16
      },
17
      // can be images or videos
18
      "preview": "https://..."
19
    },
20
    {
21
      "label": "Non animated image",
22
      "values": {
23
        "shape": "circle",
24
        "animated": true
25
      },
26
      // can be images or videos
27
      "preview": "https://..."
28
    }
29
  ],
30
  "props": {
31
    "shape": {
32
      "type": "select",
33
      "label": "Shape",
34
      "options": [
35
        {
36
          "label": "Square",
37
          "value": "square"
38
        },
39
        {
40
          "label": "Circle",
41
          "value": "circle"
42
        }
43
      ]
44
    }
45
  }
46
}

Types

Here's the typescript types for convinience

1
export type TDatoPluginBuzzOptions = {
2
  settings?: TDatoPluginBuzzOptionsSettings
3
  presets?: Record&lt;string, TDatoPluginBuzzOptionsPreset&gt;
4
  props?: Record&lt;string, TDatoPluginBuzzOptionsProp&gt;
5
  extends?: string
6
}
7

8
export type TDatoPluginBuzzOptionsConfig = {
9
  settings?: TDatoPluginBuzzOptionsSettings
10
  templates?: {
11
    [key: string]: TDatoPluginBuzzOptions
12
  }
13
}
14

15
export type TDatoPluginBuzzOptionsPreset = {
16
  label: string
17
  values: {
18
    [key: string]: string | number | boolean
19
  }
20
  preview?: string
21
}
22

23
export type TDatoPluginBuzzOptionsProp =
24
  | {
25
      label: string
26
      type: 'string' | 'number' | 'boolean'
27
      default?: string | number | boolean
28
    }
29
  | {
30
      type: 'string' | 'number' | 'select'
31
      options: {
32
        label: string
33
        value: string | number
34
      }
35
    }
36

37
export type TDatoPluginBuzzOptionsSettings = {
38
  debug?: {
39
    togglePropsKey?: boolean
40
  }
41
  presets?: {
42
    display?: boolean
43
    preview?: {
44
      aspectRatio: number
45
      height: number
46
    }
47
  }
48
  props: {
49
    display?: boolean | string[]
50
  }
51
}