How to Model a Speakers Page

Creating dedicated pages for speakers is important when you want to share their credentials, biography, or links to social media. In this guide, we are going to cover how to build a custom type for a Speakers page.

Page structure

The speakers main details will be modelled in the static part of the custom type

Title field set to H2

1 of 4

< PreviousNext >

Rich Text field with different formatting options to write a full biography of the speakers

2 of 4

< PreviousNext >

Image field with responsive views to manage our speaker's profile picture

3 of 4

< PreviousNext >

The social media links are going to be modeled with a Group field that consists of two fields:

Key Text field for the label of the social media link
Link field for its URL

4 of 4

< PreviousNext >

How to set it up in Prismic

Create a new repeatable Custom Type
Copy the JSON below and paste it under the "JSON Editor" of this new Custom Type

CopyExpand/Collapse

{
  "Main": {
    "fullname": {
      "type": "StructuredText",
      "config": {
        "single": "heading2",
        "label": "Full Name",
        "placeholder": "Speaker's Full Name"
      }
    },
    "bio": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph, strong, em, hyperlink, list-item, o-list-item",
        "allowTargetBlank": true,
        "label": "Speaker's bio",
        "placeholder": "Enter a short description of the author"
      }
    },
    "profile_picture": {
      "type": "Image",
      "config": {
        "constraint": {
          "width": null,
          "height": null
        },
        "thumbnails": [
          {
            "name": "thumbnail",
            "width": 75,
            "height": 75
          }
        ],
        "label": "Profile picture"
      }
    },
    "social_media": {
      "type": "Group",
      "config": {
        "fields": {
          "name": {
            "type": "Text",
            "config": {
              "label": "Name",
              "placeholder": "Social media name"
            }
          },
          "link": {
            "type": "Link",
            "config": {
              "allowTargetBlank": true,
              "label": "Link",
              "placeholder": "Link to the social media page"
            }
          }
        }
      }
    }
  },
  "SEO & Social": {
    "uid": {
      "type": "UID",
      "config": {
        "label": "UID",
        "placeholder": "URL slug"
      }
    },
    "meta_title": {
      "type": "Text",
      "config": {
        "label": "Meta title",
        "placeholder": "Meta title"
      }
    },
    "meta_description": {
      "type": "Text",
      "config": {
        "label": "Meta description",
        "placeholder": "Meta description"
      }
    },
    "body": {
      "type": "Slices",
      "fieldset": "Slice zone",
      "config": {
        "labels": {},
        "choices": {
          "twitter_card": {
            "type": "Slice",
            "fieldset": "Twitter Card",
            "description": "Fields to customize Twitter Card (Summary Card with Large Image)",
            "icon": "credit_card",
            "display": "list",
            "non-repeat": {
              "twitter_title": {
                "type": "StructuredText",
                "config": {
                  "single": "paragraph",
                  "label": "Title",
                  "placeholder": "Title for Twitter Card"
                }
              },
              "twitter_description": {
                "type": "StructuredText",
                "config": {
                  "single": "paragraph",
                  "label": "Description",
                  "placeholder": "Description for Twitter Card"
                }
              },
              "twitter_image": {
                "type": "Image",
                "config": {
                  "constraint": {
                    "width": 1200,
                    "height": 675
                  },
                  "thumbnails": [],
                  "label": "Image"
                }
              }
            },
            "repeat": {}
          },
          "open_graph": {
            "type": "Slice",
            "fieldset": "Open Graph",
            "description": "Fields to customize Open Graph",
            "icon": "thumb_up",
            "display": "list",
            "non-repeat": {
              "og_title": {
                "type": "StructuredText",
                "config": {
                  "single": "paragraph",
                  "label": "Title",
                  "placeholder": "Title for Open Graph"
                }
              },
              "og_description": {
                "type": "StructuredText",
                "config": {
                  "single": "paragraph",
                  "label": "Description",
                  "placeholder": "Description for Open Graph"
                }
              },
              "og_image": {
                "type": "Image",
                "config": {
                  "constraint": {
                    "width": 1200,
                    "height": 628
                  },
                  "thumbnails": [],
                  "label": "Image"
                }
              }
            },
            "repeat": {}
          }
        }
      }
    }
  }
}See More

What editors will see

Learn more

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Attend one of her upcoming live Crash Course

How to Model a Speakers Page

Page structure

How to set it up in Prismic

What editors will see

Learn more

Table of Contents