Add a new author by creating the following file. content/en/authors/jim-jones/_index.md
Inside the file add the following content
---
title: "Jim Jones"
name: "Jim Jones"
avatar: "images/team/jim-jones.jpg"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum arcu vitae elementum curabitur vitae nunc sed. Tortor at risus viverra adipiscing at in.
Make sure to add the author image in static/images/team/jim-jones.jpg
- normally I make these images 400x400px square.
Open up an existing blog post file content/en/posts/designing-your-brand.md
Edit the frontmatter authors
field changing it from authors: ['Mike Vance']
to authors: ['Jim Jones']
author
is defined as a custom taxonomy in config.toml
The logic that renders the author avatar is found in themes/hugo-advance/layouts/partials/components/author.html
{{- range .Params.authors }}
{{- with $.Site.GetPage "taxonomyTerm" (printf "authors/%s" (urlize .)) }}
{{ if .Params.avatar }}
<img src="{{ .Params.avatar | relURL }}" alt="{{ .Params.name }}"/>
{{ end }}
<a class="mr-1" href="{{ .Permalink }}">{{ .Params.name }}</a>
{{ end }}
{{ end }}
We use the Hugo GetPage function to lookup the author page and extract the image path. This function accepts a url path ie “/authors/jim-jones”. We construct this path use the urlize function which converts the value found in authors: ["Jim Jones"]
into jim-jones
and we use printf "authors/%s"
to concatenate the string into /authors/jim-jones"