How to create a blog post or an article
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
The static zone of a document is the top part of a page and the dynamic zone will provide flexibility with Slices.
Title
Every blog post will need a title, so we will make this a static field. For this we will use a Title field.
1 of 6Release 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 6Author
Every blog post will need an author, so we will use another Custom Type "Author" for this and link them through a Content Relationship.
3 of 6Text block
This content block will consist of a Text field to allow the authors to add their text content.
4 of 6Quote block
This content block will consist of a Text field.
5 of 6Image block
This content block will consist of an Image field for the image and a Text field for the caption.
6 of 6Why is it like that
Selected approach: content blocks, everything dynamic. Given that this is a 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
- Title field for the post title
- Content relationship for the author
- Date field for the blog post release date
Dynamic Section
- Text block consisting of a Rich Text field
- Quote block consisting of a Rich Text field
- Image + caption block consisting of an Image field and a Rich Text field
Author as a content relationship: why?
Two approaches are possible to manage the content related to the author of the blog post.
First approach: static fields in the blog post custom type.
With this approach, the content about the author (its profile picture, its name, links to its social medias pages, ...) will live in the blog post itself.
This means that you'll most probably repeat the same information in multiple blog posts. The downside is that the maintenance will be more complicated: if you want to update the author's profile picture or one if its social media links you'll have to do it in every blog post where the author is mentioned.
Second approach: content relationship to an author custom type.
This solution provides a single source or truth for your author's information. You'll create a specific custom type for the author as explained here. This way the author's information will be stored in a document. You'll then add a Content Relationship field in your blog post custom type to link every blog post to its author. No more repeated content and the updates will be way easier!
How to set it up in Prismic
- Set up a new custom type.
- Add the fields for the static zone.
- For each of the three 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:
JSON Structure
{ "Main": { "title": { "type": "StructuredText", "config": { "single": "heading1", "label": "Title", "placeholder": "Blog post title..." } }, "release_date": { "type": "Date", "config": { "label": "Release Date" } }, "author": { "type": "Link", "config": { "select": "document", "label": "Author", "placeholder": "Link to an author document" } }, "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.
