Add Blog Author
Learn how to add a new author profile for blog posts in Plainform
Learn how to add a new author profile for blog posts in Plainform.
Goal
By the end of this recipe, you'll have added a new author profile that can be used in blog posts.
Prerequisites
- A working Plainform installation
- Basic understanding of JSON syntax
- (Optional) Author profile picture
Add a New Author
Open the Locale File
locales/en.jsonAdd Author Entry
Locate blogPage.authors and add your new author:
{
"blogPage": {
"authors": {
"john-doe": {
"name": "John Doe",
"role": "Fullstack Engineer",
"profilePicture": "https://your-bucket-name.s3.region.amazonaws.com/john-doe.jpg"
},
"jane-smith": {
"name": "Jane Smith",
"role": "Product Designer",
"profilePicture": "https://your-bucket-name.s3.region.amazonaws.com/jane-smith.jpg"
}
}
}
}Fields:
- Key (e.g.,
jane-smith) - Unique identifier in lowercase with hyphens - name - Full name displayed on blog posts
- role - Job title (2-4 words)
- profilePicture - Optional URL to profile image. If omitted, the avatar fallback displays the author's initial.
Profile Picture: Upload to AWS S3 or use an external URL (Gravatar, LinkedIn). Recommended: 200x200px, square aspect ratio, under 500KB.
Use in Blog Post
Reference the author key in your blog post frontmatter:
---
title: My Blog Post
author: jane-smith
---The author key must match exactly with the key in locales/en.json.
Commit Changes
git add locales/en.json
git commit -m "feat: add jane smith as blog author"
git push origin mainCommon Issues
Author Not Displaying
Verify the author key in your blog post matches exactly with the key in locales/en.json:
// ❌ Wrong - key mismatch
// In en.json: "jane-smith"
// In blog post: author: jane_smith
// ✅ Correct
// In en.json: "jane-smith"
// In blog post: author: jane-smithProfile Picture Not Loading
- Verify the URL is publicly accessible
- Check that the URL starts with
https:// - Test the URL directly in a browser
JSON Syntax Error
Ensure proper JSON syntax with commas between entries:
// ❌ Wrong - missing comma
{
"john-doe": { ... }
"jane-smith": { ... }
}
// ✅ Correct
{
"john-doe": { ... },
"jane-smith": { ... }
}Next Steps
- Add Blog Post - Create a post with your new author
- Storage Integration - Upload profile pictures to S3
How is this guide ?
Last updated on