Author Byline

Display author information with avatar and social links

3 min read 635 words
Edit this page

Was this page helpful?

Display author information including avatar, bio, and social links.

Note

Built into Default Theme

Bengal's default theme includes full author support out of the box:

  • Author pages at/authors/{name}/ (created via content/authors/{name}.mdfiles)
  • Author bylines in blog posts (enable withcontent.authorfeature)
  • Author index for O(1) lookup viasite.indexes.author

This recipe shows how to customize the display or build your own author components.

The Pattern

Frontmatter Setup

YAML
---
title: "Getting Started with Bengal"
author:
  name: Jane Smith
  avatar: /images/authors/jane.jpg
  bio: Senior developer and tech writer
  social:
    twitter: janesmith
    github: janesmith
---

Note

Social Links Format

Social links must be nested undersocial in frontmatter. The page.author.twitter and page.author.github properties access these values from the socialdict.

Or use a simple string for name-only:

YAML
---
author: Jane Smith
---

Template Code

KIDA
{% if page.author %}
<div class="author-byline">
  {% if page.author.avatar %}
  <img src="{{ page.author.avatar }}" alt="{{ page.author.name }}" class="author-avatar">
  {% end %}

  <div class="author-info">
    <span class="author-name">{{ page.author.name }}</span>
    {% if page.author.bio %}
    <p class="author-bio">{{ page.author.bio }}</p>
    {% end %}
  </div>
</div>
{% end %}

What's Happening

Component Purpose
page.author Primary Author object (or None)
page.author.name Author's display name
page.author.avatar Path to avatar image
page.author.bio Short biography
page.author.twitter Twitter handle (without @)

Variations

KIDA
{% if page.author %}
<div class="author-byline">
  <img src="{{ page.author.avatar or '/images/default-avatar.png' }}"
       alt="{{ page.author.name }}">

  <div class="author-info">
    <span class="author-name">{{ page.author.name }}</span>

    <div class="author-social">
      {% if page.author.twitter %}
      <a href="https://twitter.com/{{ page.author.twitter }}">
        <i class="icon-twitter"></i>
      </a>
      {% end %}
      {% if page.author.github %}
      <a href="https://github.com/{{ page.author.github }}">
        <i class="icon-github"></i>
      </a>
      {% end %}
      {% if page.author.linkedin %}
      <a href="https://linkedin.com/in/{{ page.author.linkedin }}">
        <i class="icon-linkedin"></i>
      </a>
      {% end %}
      {% if page.author.mastodon %}
      <a href="{{ page.author.mastodon }}">
        <i class="icon-mastodon"></i>
      </a>
      {% end %}
    </div>
  </div>
</div>
{% end %}
KIDA
{% if page.authors %}
<div class="authors">
  <span class="authors-label">Written by</span>
  {% for author in page.authors %}
  <div class="author">
    {% if author.avatar %}
    <img src="{{ author.avatar }}" alt="{{ author.name }}">
    {% end %}
    <span>{{ author.name }}</span>
  </div>
  {% end %}
</div>
{% end %}

Frontmatter for multiple authors:

YAML
---
authors:
  - name: Jane Smith
    avatar: /images/jane.jpg
    social:
      twitter: janesmith
  - name: John Doe
    avatar: /images/john.jpg
    social:
      github: johndoe
---
KIDA
{% if page.author %}
<p class="byline">
  By {{ page.author.name }}
  {% if page.date %}
  · {{ page.date | date('%B %d, %Y') }}
  {% end %}
  · {{ page.reading_time }} min read
</p>
{% end %}
KIDA
{% if page.author %}
<a href="/authors/{{ page.author.name | slugify }}/" class="author-link">
  {% if page.author.avatar %}
  <img src="{{ page.author.avatar }}" alt="">
  {% end %}
  {{ page.author.name }}
</a>
{% end %}
KIDA
{% if page.author %}
<aside class="author-card">
  <div class="author-header">
    {% if page.author.avatar %}
    <img src="{{ page.author.avatar }}" alt="{{ page.author.name }}" class="avatar">
    {% end %}
    <div>
      <h4>{{ page.author.name }}</h4>
      {% if page.author.bio %}
      <p>{{ page.author.bio }}</p>
      {% end %}
    </div>
  </div>

  {% if page.author.url %}
  <a href="{{ page.author.url }}" class="author-website">
    Visit website →
  </a>
  {% end %}
</aside>
{% end %}

Example CSS

CSS
.author-byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-weight: 600;
}

.author-bio {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0;
}

.author-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.author-social a {
  color: var(--text-muted);
}

.author-social a:hover {
  color: var(--accent);
}

Seealso