Author Byline

Display author information with avatar and social links

3 min read 635 words

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 viacontent/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

---
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 undersocialin frontmatter. Thepage.author.twitterandpage.author.githubproperties access these values from thesocialdict.

Or use a simple string for name-only:

---
author: Jane Smith
---

Template Code

{% 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

{% 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 %}

{% 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:

---
authors:
  - name: Jane Smith
    avatar: /images/jane.jpg
    social:
      twitter: janesmith
  - name: John Doe
    avatar: /images/john.jpg
    social:
      github: johndoe
---

{% 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 %}

{% 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 %}

{% 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

.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