How to create an author page

An "Author" Custom Type is useful to create dedicated pages for the authors of your content.

The author has only one name so we'll add a Title field to the static part of our Custom Type.

1 of 4
< PreviousNext >

To write a complete biography or description of our author's life and achievements we'll use a Rich Text field with some formatting constraints as explained below.

2 of 4
< PreviousNext >

We'll add an Image field with responsive views to manage our author's profile picture.

3 of 4
< PreviousNext >

The social media links are going to be modeled with a repeatable group of two fields: one Key Text field for the label of the social media link and one Link field for its URL.

4 of 4
< PreviousNext >

The content model

In this modeling example, we chose to use only the static part of the Custom Type.

One Title field for the author name

The Title field in Prismic is meant to be used to manage titles. The formatting options can be constrained to predefined heading levels (h1, h2, h3, h4, h5, h6). In this case, we've limited the formatting options to "h1" because we don't want the content editors to be able to change the heading level.

One Rich Text field for the biography/description

The Rich Text field is a configurable text field with formatting options. This field provides content writers with a WYSIWYG editor where they can define the text as a title or a paragraph, make it bold, add links, etc. It can also be restricted to a set of formatting options.

This is the perfect field to manage the rich content of the author's biography. We chose to limit the formatting options to paragraphs, bold, italic, links, and lists.

One Image field with responsive views for the profile picture

We are using an Image field to manage the profile picture of the author. This field allows content editors to upload images directly in Prismic. The image field provides options to create responsive versions of a single image. It means that you can get multiple predefined versions of the same image. In our case, we could use one version in the original size to display it on the author page and a thumbnail version to display in articles written by the author.

One Group of two fields for social media links

An author may have multiple social media pages (Instagram, Twitter, Linkedin, ...) so we are using a Group field containing two fields to manage the social media links. A Group field is repeatable set of fields. Here, our Group contains 1 Key Text field to manage the name of our social media link (e.g. "Instagram") and a Link field to manage the link itself.

A Key text is a simple text field without any formatting options: it can be seen as a simple string. The Link field is used to add links in the Custom type: it could be external links to the web (what we need here), a link to another document in Prismic, or a link to an asset hosted in Prismic like a PDF file for example.

How to set it up in Prismic

Prismic Custom Type Builder
  • Set up a new repeatable Custom Type
  • Drag and drop the fields described above in the Static Zone

If you want to try this Custom Type in Prismic, copy and paste the following JSON in the JSON editor on the top-right corner of your Custom Type as showed in the GIF below.

JSON structure

CopyExpand/Collapse

What editors will see

When an editor creates a document based on this author Custom Type created above, the document edit page will look like this in the Writing Room

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.) Schedule a call