Display Author Details form Data File Within List Pages

support
1

For the sake of reducing repetition throughout my website, I want to store all data about an author in a data file and access it across the site.

The setup could be exactly like:

Hypothetically, I could have a folder in the data directory named “_authors”

Inside I might have a number of toml files named “firstname-lastname.toml” containing author data:

name = “Full Name”
bio = “Bio goes here”
image = “/authorimg/firstname-lastname.jpg”

And, I might have the following in my post’s frontmatter:
authors “Firstname Lastname”

I have tried the solutions offered by @pointyfar and @bootyocean18 and both work well on my single.html template (However, I had to name my data file “Firstname Lastname.toml”):

In my case, for ‘single.html’ I adapted @bootyocean18’s solution to read:

{{ $author := index .Site.Data._authors .Params.authors }}
{{$author.name}}

How would you solve this problem enabling me to name my data file “firstname-lastname.toml” while the post’s frontmatter reads ‘authors: [“Firstname Lastname”]’, and how could the data be used on pages such as list pages (within a paginated list of posts) and possibly …localhost:1313/authors/

Thank you for your time.

Side note: Unfortunately, I am a bit green when it comes to git and have not figured out how to update my repo (with the new data files) via CLI – I do apologise about that.

https://github.com/thejollyfrog/vg2

2

Hey!

Since you haven’t worked out git CLI yet, I can’t really see what you got going on, so I’m going to show you what I did (I don’t think I ever posted my full solution anywhere).

REPO

First, here’s a link to a repo: Remy Sheppard / Lutheran Answers Rebuild · GitLab

Author File

Within data/authors I have my author YAML file (available to view here). I choose YAML because I prefer writing it, but you can use TOML or JSON as well.

That file outlines my name, my profile picture location, social media stuff, etc.

Calling that file

Now to use that file, I have to call it from within a template. That is easy enough to hard-code if you have one author, but the reason I use an author data file is to make room for multiple authors. So I need to specify at the article level which author.

In a given page’s front matter I have the following:

title: "some title"
author: remy
feature: some-image.png
description: some description
date: 2021-04-25

The important field here is author, where I specify the filename of the author file I want to call without the extension (though you could modify this to include extensions at this level if you wanted).

How do we use this information?

Alright, so now we have a data file with our author info, and we have the page front matter that specifies which author file to grab for that article.

First let’s look at list pages.

So on this page here you can see that I pull external author info from a data file into a list page.

My list calls a summary template, which is where the magic happens. You can view my specific summary template here: layouts/podcast/summary.html

The important piece of code is line 10:

{{ $author := index .Site.Data.authors .Params.author }}

So what I’m doing here is declaring a variable called $author. And I’m making that variable an object that contains all of the information of my author file as keys.

The index function will range through whatever input you give it, so I’m telling it to load in the information in the authors folder, and use whatever is in my front matter as the key (that’s the .Params.author part).

So now my $author variable is an array-type object with keys that match the fields in my remy.yaml data file. Does that make sense?

So in my data file, if I have a field called birthday, I can access that field by calling $author.birthday.

Here you can see where I call a few things in this little snippet of code:

<a href="{{ $author.url }}" target="_blank" class="block relative">
  <img alt="profil" src="/images/authors/{{ $author.avatar }}" class="mx-auto object-cover rounded-full h-10 w-10 p-0 m-0"/>
</a>
<div class="flex flex-col justify-between ml-5 text-sm">
  <a href="{{ $author.url }}" target="_blank" class="text-gray-800 m-0 p-0">
    {{ $author.name }}
 </a>

Easy enough.

Now in the single.html template I’m going to repeat that same logic. You can check it out here.

I also have an author-block.html template partial to have my little author blocks on the ends of pages where it’s called. The logic on that is a bit more complex because I call nested social media fields. It is essentially the same idea that I described above.

If I have a field called favorite, and underneath that I have sub-fields called food, color, music, those things are all accessible from my variable in the naturally assumed way:

$author.favorite.color

In my author box shortcode I do this with social media, and I implement some conditional logic to avoid errors and to only print the social media profiles that actually exist for that person. You can check that out here: layouts/partials/author-block.html

(Make sure you understand Hugo’s scoping methods with the all-powerful . - otherwise that template might be confusing!)

Closing takeaways

Make sure you name your author file something you can call, and then let your author name be a field in that file.

My variable snippet needs to be called at the start of every single template file you plan to use it in.

Make sure you spend some time today learning git CLI before you do anything else.

3

Use taxonomies instead of data files.

Have a read about taxonomies here: Taxonomies | Hugo

Adding metadata to taxonomies is discussed further down the page.

4

Thank you so much for your time and effort. Feeling blessed. Nice website also!

I have done exactly that and will continue to do so until I have a grasp of it.

Once git is out of the way, I’ll give this a shot and report back.

5

Thank you @pointyfar. I tried this method first and struggled to access meta from the authors front matter.

It could have been my execution though as I am new to Hugo.

I will try this again using the example.

6

@pointyfar after reading through the resource you posted, I have attempted to use taxonomies for displaying additional data regarding the authors across the website.

I was able to display data from _index.md on the /authors/ page, but I cannot figure out how to display anything on the home page.

I have tried using {{ .Params.bio }} (as a test) when looping through the pages, but nothing will display.

I expect this is a context issue which I don’t currently understand.

Ideally, I would like to display data for each author (author image, bio, personal websites…) across the website, in places such as:

  • Home page
  • Authors page (all authors)
  • author page (specific author)
  • Each post by the author

Is this possible to achieve in this way?

Please see: GitHub - thejollyfrog/vg2