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 4To 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 4We'll add an Image field with responsive views to manage our author's profile picture.
3 of 4The 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 4The 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
- 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
{ "Main": { "fullname": { "type": "StructuredText", "config": { "single": "heading1", "label": "Full Name", "placeholder": "Author's Full Name" } }, "bio": { "type": "StructuredText", "config": { "multi": "paragraph, strong, em, hyperlink, list-item, o-list-item", "allowTargetBlank": true, "label": "Author'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" } } } } } } }See More
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
