The Slices field is used to define a dynamic zone for richer page layouts. 

For example in a blog post, defining a Slice zone allows the writer to choose between adding a text section, an image, or a quote. This gives the writer the freedom to compose the blog post by alternating and ordering as many of these choices as they want/need.

You can use Slices for defining dynamic layouts in any of your content types: blog posts, landing pages, case studies, tutorials, any place you want to give the content writers the choice between different template options.

Configuration

When configuring each slice in your slice-zone, you have three options for the config: “Name”, “Description”, and “Icon”.

 

Name

The name configuration will be the main name of the slice that appears when selecting a slice.
 

Description

This will define the text that provides more information about the slice. This appears underneath the name when selecting a slice.
 

Icon

This will be the icon that displays for the slice when selecting a slice.

 

Adding Fields to your Slice

Adding the fields you need for your slice is easy. Simply drag-and-drop the fields you need into either the Non-repeatable Zone or the Repeatable Zone.

The Non-repeatable Zone will be for fields that you only want one of for each slice. The Repeatable Zone is for fields that you want to be able to add as many as needed for the slice.
 

Advanced JSON Configurations

The "fieldset" attribute

To change the name that appears for the slice zone, use the "fieldset" attribute. 

"fieldset": "Post content",

In the example below, you can see the fieldset attribute being used.
  

The “labels” configuration

The “labels” option allows content writers to choose optional variations of a Slice choice. 

For example, you could have a Rich Text choice where the content writer can pick between having the text display as “One Column” or “Two Columns”. If one of these is selected, then in your templates you could have the text display differently depending on the selection.

Here is the format:

"labels": {
  "slice-name": [
    {
      "name": "Tag to appear in API response",
      "display": "Display name in document editor"
    },
    {
      "name": "Tag to appear in API response",
      "display": "Display name in document editor"
    }
  ]
}

In the above example, “slice-name” would need to match one of the Slice choices. This set of labels will be available only for that choice.

View the example below to see how to configure the "labels" option. 

 

Full JSON Examples

Here is an example of a Slice field with three options (Rich Text, Quote, & an Image Gallery) :

{
  "Blog Post": {
    "body": {
      "type": "Slices",
      "fieldset": "Post content",
      "config": {
        "labels": {
          "text": [
            {
              "name": "col-1",
              "display": "Single Column"
            },
            {
              "name": "col-2",
              "display": "Two Columns"
            }
          ]
        },
        "choices": {
          "text": {
            "type": "Slice",
            "non-repeat": {
              "text": {
                "type": "StructuredText",
                "fieldset": "Text",
                "config": {
                  "multi": "paragraph, heading1, heading2, heading3, strong, em, hyperlink",
                  "placeholder": "Post text..."
                }
              }
            },
            "fieldset": "Text",
            "description": "A text section",
            "icon": "text_fields"
          },
          "quote": {
            "type": "Slice",
            "non-repeat": {
              "quote": {
                "type": "StructuredText",
                "fieldset": "Quote",
                "config": {
                  "placeholder": "Post quote...",
                  "single": "paragraph"
                }
              }
            },
            "fieldset": "Quote",
            "description": "A styled qoute section",
            "icon": "format_quote"
          },
          "image_with_caption": {
            "type": "Slice",
            "fieldset": "Images Gallery",
            "repeat": {
              "illustration": {
                "type": "Image"
              },
              "caption": {
                "type": "StructuredText",
                "config": {
                  "single": "heading3",
                  "placeholder": "Image caption..."
                }
              }
            },
            "description": "A gallery of images with captions",
            "icon": "image"
          }
        }
      }
    }
  }
}

 

JSON Reference 

type: (string, required) Slices

config: (object, optional) Options listed below

 

config

label: (string, optional) Sets the label that shows up for the field in the entry editor

choices: (object, required) Set the choices available for the Slice zone. For each choice add fields in the non-repeatable and repeatable section with their optional configuration as defined in the fields reference

labels: (object, optional) Sets the available labels for each Slice choice. Each key of the object should match the corresponding Slice choice API ID. The value should be an array of labels (options shown below)

 

labels

name: (string, required) This defines the tag that will be displayed in the API response object for this slice choice.

display: (string, required) This defines the display name for the tag in the document editor. 

Did this answer your question?