# Author Byline

URL: /docs/theming/recipes/author-byline/
Section: recipes
Tags: cookbook, author, byline

--------------------------------------------------------------------------------

Author Byline Display author information including avatar, bio, and social links. Note 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}.md files) Author bylines in blog posts (enable with content.author feature) Author index for O(1) lookup via site.indexes.author This recipe shows how to customize the display or build your own author components. The Pattern Frontmatter Setup --- title: &quot;Getting Started with Bengal&quot; author: name: Jane Smith avatar: /images/authors/jane.jpg bio: Senior developer and tech writer social: twitter: janesmith github: janesmith --- Note Note Social Links Format Social links must be nested under social in frontmatter. The page.author.twitter and page.author.github properties access these values from the social dict. Or use a simple string for name-only: --- author: Jane Smith --- Template Code &#123;% if page.author %&#125; &lt;div class=&quot;author-byline&quot;&gt; &#123;% if page.author.avatar %&#125; &lt;img src=&quot;{{ page.author.avatar }}&quot; alt=&quot;{{ page.author.name }}&quot; class=&quot;author-avatar&quot;&gt; &#123;% end %&#125; &lt;div class=&quot;author-info&quot;&gt; &lt;span class=&quot;author-name&quot;&gt;{{ page.author.name }}&lt;/span&gt; &#123;% if page.author.bio %&#125; &lt;p class=&quot;author-bio&quot;&gt;{{ page.author.bio }}&lt;/p&gt; &#123;% end %&#125; &lt;/div&gt; &lt;/div&gt; &#123;% end %&#125; 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 With Social Links Multiple Authors Compact Inline Link to Author Page Full Author Card &#123;% if page.author %&#125; &lt;div class=&quot;author-byline&quot;&gt; &lt;img src=&quot;{{ page.author.avatar or &#x27;/images/default-avatar.png&#x27; }}&quot; alt=&quot;{{ page.author.name }}&quot;&gt; &lt;div class=&quot;author-info&quot;&gt; &lt;span class=&quot;author-name&quot;&gt;{{ page.author.name }}&lt;/span&gt; &lt;div class=&quot;author-social&quot;&gt; &#123;% if page.author.twitter %&#125; &lt;a href=&quot;https://twitter.com/{{ page.author.twitter }}&quot;&gt; &lt;i class=&quot;icon-twitter&quot;&gt;&lt;/i&gt; &lt;/a&gt; &#123;% end %&#125; &#123;% if page.author.github %&#125; &lt;a href=&quot;https://github.com/{{ page.author.github }}&quot;&gt; &lt;i class=&quot;icon-github&quot;&gt;&lt;/i&gt; &lt;/a&gt; &#123;% end %&#125; &#123;% if page.author.linkedin %&#125; &lt;a href=&quot;https://linkedin.com/in/{{ page.author.linkedin }}&quot;&gt; &lt;i class=&quot;icon-linkedin&quot;&gt;&lt;/i&gt; &lt;/a&gt; &#123;% end %&#125; &#123;% if page.author.mastodon %&#125; &lt;a href=&quot;{{ page.author.mastodon }}&quot;&gt; &lt;i class=&quot;icon-mastodon&quot;&gt;&lt;/i&gt; &lt;/a&gt; &#123;% end %&#125; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &#123;% end %&#125; &#123;% if page.authors %&#125; &lt;div class=&quot;authors&quot;&gt; &lt;span class=&quot;authors-label&quot;&gt;Written by&lt;/span&gt; &#123;% for author in page.authors %&#125; &lt;div class=&quot;author&quot;&gt; &#123;% if author.avatar %&#125; &lt;img src=&quot;{{ author.avatar }}&quot; alt=&quot;{{ author.name }}&quot;&gt; &#123;% end %&#125; &lt;span&gt;{{ author.name }}&lt;/span&gt; &lt;/div&gt; &#123;% end %&#125; &lt;/div&gt; &#123;% end %&#125; 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 --- &#123;% if page.author %&#125; &lt;p class=&quot;byline&quot;&gt; By {{ page.author.name }} &#123;% if page.date %&#125; · {{ page.date | date(&#x27;%B %d, %Y&#x27;) }} &#123;% end %&#125; · {{ page.reading_time }} min read &lt;/p&gt; &#123;% end %&#125; &#123;% if page.author %&#125; &lt;a href=&quot;/authors/{{ page.author.name | slugify }}/&quot; class=&quot;author-link&quot;&gt; &#123;% if page.author.avatar %&#125; &lt;img src=&quot;{{ page.author.avatar }}&quot; alt=&quot;&quot;&gt; &#123;% end %&#125; {{ page.author.name }} &lt;/a&gt; &#123;% end %&#125; &#123;% if page.author %&#125; &lt;aside class=&quot;author-card&quot;&gt; &lt;div class=&quot;author-header&quot;&gt; &#123;% if page.author.avatar %&#125; &lt;img src=&quot;{{ page.author.avatar }}&quot; alt=&quot;{{ page.author.name }}&quot; class=&quot;avatar&quot;&gt; &#123;% end %&#125; &lt;div&gt; &lt;h4&gt;{{ page.author.name }}&lt;/h4&gt; &#123;% if page.author.bio %&#125; &lt;p&gt;{{ page.author.bio }}&lt;/p&gt; &#123;% end %&#125; &lt;/div&gt; &lt;/div&gt; &#123;% if page.author.url %&#125; &lt;a href=&quot;{{ page.author.url }}&quot; class=&quot;author-website&quot;&gt; Visit website → &lt;/a&gt; &#123;% end %&#125; &lt;/aside&gt; &#123;% end %&#125; 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); } Info Seealso Template Functions Reference — Author properties Build a Multi-Author Blog — Full tutorial

--------------------------------------------------------------------------------

Metadata:
- Author: lbliii
- Word Count: 572
- Reading Time: 3 minutes