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.json

Add 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 main

Common 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-smith

Profile 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

How is this guide ?

Last updated on

On this page