How to Model a Category Page
This custom type aims at linking parent pages to a child category.
First, your main content should be ready and your category pages as well. Once the content ready, you'll be able to make the link happen thanks to a content relationship field in the main document.
Start with your design
For the purpose of this article find below a sample design of how your category page might look like. A category custom type will be a repeatable type of template so that your content editors can create different category pages.
Follow those steps to understand how this design has been modeled into a custom type in Prismic.
We recommend keeping this in the static part of your custom type. Drag and drop a title field for the first step.
1 of 3Drag and drop a rich text field for a description of the category.
2 of 3Drag and drop an image field for the image of the category.
3 of 3The content model
In this modeling example, we chose to use only the static part of the Custom Type.
The static section of our category will contain the following elements:
One Title field for the category 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 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.
One Image field with responsive views for an image
We are using an Image field to manage the image of the category if you have any. 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.
How to set it up in Prismic
First, set up a new repeatable Custom Type and then 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 in the top-right corner of your Custom Type as shown in the GIF below.
JSON structure
You can copy the following into the JSON editor of your custom type builder.
{ "Main" : { "uid" : { "type" : "UID", "config" : { "label" : "UID", "placeholder" : "" } }, "category_name" : { "type" : "StructuredText", "config" : { "single" : "heading3", "label" : "Category Name", "placeholder" : "Enter category name" } }, "category_description" : { "type" : "StructuredText", "config" : { "multi" : "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl", "label" : "category description", "placeholder" : "Describe" } }, "hero_image" : { "type" : "Image", "config": { "constraint": { "width": null, "height": null }, "thumbnails": [ { "name": "large", "width": 1600, "height": 850 }, { "name": "medium", "width": 1200, "height": 638 }, { "name": "small", "width": 800, "height": 425 } ], "label" : "Hero image" } } } }See More
What editors will see
When an editor creates a document based on this Category Custom Type, the writing room will look like this:
