How to create a content model for a blog post
Sample design
For the purpose of this article we're going to use this blog post mockup:
The content model: what's dynamic, what's static
Title
Every blog post will need a title, so we will make this a static field. For this we will use a Text field.
1 of 5Release Date
Every blog post will need a release date, so we will make this a static field. We will use a Date field for this.
2 of 5Text block
This content block will consist of a Text field to allow the authors to add their text content.
3 of 5Quote block
This content block will consist of a Text field.
4 of 5Image block
This content block will consist of an Image field for the image and a Text field for the caption.
5 of 5The content model
In the static section of the post we will need the following elements:
- Post title
- Release date
In the Dynamic Zone of the post, there are 3 major content blocks:
- Text block
- Quote block
- Image + caption block
These 3 blocks will be setup in the dynamic section so that they can be freely mixed and matched to build your blog posts.
See the introduction to content modeling for more context on dynamic and static sections.
Why is it like that
Selected approach: content blocks, everything dynamic. Given that this is blog and you will be creating lots of posts, we will compose our pages with reusable blocks. This way, the order of the content blocks can vary from page to page, and some of these sections can appear as many times as needed for each post.
Alternative approach: a single Rich Text field. Many content management systems provide a Rich Text field that allows you to add all your text and images in a single field. For some simple blog designs, this might be enough!
Possible consequences of the single Rich Text approach. If you choose to take this approach, you'll be at the mercy of the elements provided in the Rich Text field. For example, you would have no way to add videos to your page if this isn't an option in the Rich Text field.
The content model: the fields
Choosing the fields for each section is rather straightforward:
Static Section
- Text field for the post title
- Date field for the blog post release date
Dynamic Section
- Text block consisting of a Text field
- Quote block consisting of a Text field
- Image + caption block consisting of an Image field and a Text field
How to set it up in Prismic
- Set up a new custom type
- Add the fields for the static zone
- For each of the 3 content blocks, create a separate slice
- Add the field(s) for each slice as defined above
If you want to try this model in Prismic, copy this JSON instead of setting up the model manually:
{ "Main": { "title": { "type": "StructuredText", "config": { "single": "heading1", "label": "Title", "placeholder": "Blog post title..." } }, "release_date": { "type": "Date", "config": { "label": "Release Date" } }, "body": { "type": "Slices", "fieldset": "Slice zone", "config": { "choices": { "text": { "type": "Slice", "fieldset": "Text", "description": "A rich text section", "icon": "text_fields", "non-repeat": { "text": { "type": "StructuredText", "config": { "multi": "paragraph, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, list-item, o-list-item", "allowTargetBlank": true, "label": "Text", "placeholder": "Enter your text..." } } }, "repeat": {} }, "quote": { "type": "Slice", "fieldset": "Quote", "description": "A featured quote", "icon": "format_quote", "non-repeat": { "quote": { "type": "StructuredText", "config": { "single": "paragraph, strong, em", "label": "quote", "placeholder": "Enter quote..." } } }, "repeat": {} }, "image": { "type": "Slice", "fieldset": "Image", "description": "An image with optional caption", "icon": "image", "non-repeat": { "image": { "type": "Image", "config": { "constraint": {}, "thumbnails": [], "label": "Image" } }, "caption": { "type": "StructuredText", "config": { "single": "paragraph, strong, em, hyperlink", "allowTargetBlank": true, "label": "Caption", "placeholder": "Optional image caption..." } } }, "repeat": {} } } } } } }See More
What editors will see
When an editor creates a document based on the blog post custom type created above, they can add any of these slices and fill the placeholders with content.
