Ghost Tips & Tricks #10 / Ghost Authors - Practical Examples to Use in Your Theme

Marketplace
1

Hello everyone,

This is issue number #10 of Ghost Tips & Tricks. Brought to you by Aspire Themes. Premium and high-quality Ghost themes.

This practical post will show how to work with Ghost Author API. I will show examples of how to display all the website authors, show-specific authors, exclude some and more cases to use in your Ghost theme.

I will use the Ghost #get block helper to make custom queries to the Ghost API to get the author’s data.

Show All Authors

Let’s start with a basic example to show all the website authors.

{{#get 'authors' limit='all'}}
  {{#foreach authors}}
    {{ name }}
  {{/foreach}}
{{/get}}

Here, we have used the limit attribute with the all value to specify how many authors we want in return. In this case, we passed the all value to get all authors.

The default value of the limit attribute is 15. In addition to the all value, we can pass a number; for example, if we want to get four authors, we can use limit='4'.

{{#get 'authors' limit='4'}}
  {{#foreach authors}}
    {{ name }}
  {{/foreach}}
{{/get}}

In addition to the #get block helper, I used the foreach, loop helper, to iterate over the data one by one and then output the author content inside its opening and closing tags {{#foreach}}{{/foreach}}.

The final result of the previous example will be.

  Ahmad Ajmi
  William James
  Emily James
  Jeff Rosenberger
  Olivia Thomas

As you can see, the only date we get so far is the author name using the {{#foreach}}{{ name }} attribute. Let’s see how we can make the author name clickable to go to the author page when clicking on it.

The following example will output all the author as an HTML unordered list.

{{#get 'authors' limit='4'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }}</a>
  {{/foreach}}
{{/get}}

Here, I used the {{#foreach}}{{ url }} attribute, which will output the author URL within an HTML link tag.

The result will be.

  <a href="/author/ahmad/">Ahmad Ajmi</a>
  <a href="/author/william/">William James</a>
  <a href="/author/emily/">Emily James</a>
  <a href="/author/jeff/">Jeff Rosenberger</a>

For the list of the available attributes, check Author object attributes.

To create a custom authors page, read my Create an Authors List Page post.

Show Specific Authors

To show only a specific author, use the filter attribute and pass the Slug of each tag you want to get.

You can find the tag Slug on the tag setting page.

Ghost Author Slug
Ghost Author Slug1280×512 25.3 KB

In this case, the basic syntax for the #get block helper is.

{{#get 'authors' filter='slug:[SLUG, SLUG, SLUG]'}}

Note the Comma (,) separating each slug.

If we want to get the authors with the ahmad, eiad and adham slugs, the previous example will be like.

{{#get 'authors' filter='slug:[ahmad, eiad, adham]'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }}</a>
  {{/foreach}}
{{/get}}

Note

This way does not guarantee to get the same authors in the same order as you added the slugs. Probably a Ghost issue. Instead, use the following method.

In this method, we get each author separately. For example, to get the author with ahmad and eiad slugs.

{{#get 'authors' filter='slug:ahmad'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }}</a>
  {{/foreach}}
{{/get}}

{{#get 'authors' filter='slug:eiad'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }}</a>
  {{/foreach}}
{{/get}}

Note that I removed the [ ] around the slug as we are only filtering with one slug.

Exclude Authors

Suppose you want to show all authors except a few ones. For example, you want to show all the website authors but the authors with ahmad and eiad slugs.

In this case, the basic syntax for the #authors helper is.

{{#get 'authors' filter='slug:-[SLUG, SLUG, SLUG]'}}

The difference here from the previous example is the - sign in the filter attribute before the slugs. Note the following example.

{{#get 'authors' filter='slug:-[ahmad, eiad]'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }}</a>
  {{/foreach}}
{{/get}}

Show Post Count

Another practical example is to show the post count for each author. Use the include attribute and pass the count.posts as a value. Let’s see, we want to show four authors and how many posts each one has.

{{#get 'authors' limit='4' include='count.posts'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }} ({{ count.posts }})</a>
  {{/foreach}}
{{/get}}

The result will be.

  <a href="/author/ahmad/">Ahmad Ajmi (4)</a>
  <a href="/author/william/">William James (3)</a>
  <a href="/author/emily/">Emily James (2)</a>
  <a href="/author/jeff/">Jeff Rosenberger (6)</a>

We can also order the authors by their post count. In the following example, I used the order attribute to order by the count.posts we used before in the include attribute.

{{#get 'authors' limit='4' include='count.posts' order='count.posts desc'}}
  {{#foreach authors}}
    <a href='{{ url }}'>{{ name }} ({{ count.posts }})</a>
  {{/foreach}}
{{/get}}

The result will be.

  <a href="/author/olivia/">Olivia Thomas (8)</a>
  <a href="/author/jeff/">Jeff Rosenberger (6)</a>
  <a href="/author/ahmad/">Ahmad Ajmi (4)</a>
  <a href="/author/william/">William James (3)</a>

Show Posts for Each Author

Let’s take a more complex example. Suppose we want to list four authors ordered by how many posts they have and show their posts under each of them.

{{#get 'authors' limit='4' include='count.posts' order='count.posts desc'}}
  {{#foreach authors}}
    <h4><a href='{{ url }}'>{{ name }}</a></h4>

    {{#get 'posts' filter='primary_author:{{slug}}' limit='3'}}
      <ul>
        {{#foreach posts}}
          <li><a href='{{ url }}'>{{ title }}</a></li>
        {{/foreach}}
      </ul>
    {{/get}}
  {{/foreach}}
{{/get}}

I added a new #get block helper starting from line five inside the foreach helper to get the posts associated with each author filtered by his slug. I also set the limit to three posts, but you are free to customize this.

For example, if the author slug is ahmad, I’m asking Ghost to get the posts associated with him using the filter attribute and pass the {{slug}} as a value to primary_author. The {{slug}} is already available for each author as a data value like name and image, and in this case, it will be rendered as ahmad.

So, the code for the posts helper will be interpreted as follows.

{{#get 'posts' filter='primary_author:ahmad' limit='3'}}
  {{#foreach posts}}
    <li><a href='{{ url }}'>{{ title }}</a></li>
  {{/foreach}}
{{/get}}

This will happen for each author within the loop. The result will look like the following example. Each author and his posts underneath.

<h4><a href="/author/eiad/">Jeff Rosenberger</a></h4>
<ul>
  <li><a href="/a-rich-life/">A Rich Life…</a></li>
  <li><a href="/it-would-be/">The Rappers…</a></li>
  <li><a href="/themes/">Expertise Is…</a></li>
</ul>

<h4><a href="/author/ahmad/">Ahmad Ajmi</a></h4>
<ul>
  <li><a href="/travel/">Travel Is No…</a></li>
  <li><a href="/my-ultimate-reading/">My Ultimate…</a></li>
  <li><a href="/untitled/">10 Trends for Creators…</a></li>
</ul>

<h4><a href="/author/adham/">Olivia Thomas</a></h4>
<ul>
  <li><a href="/organising/">How to Get…</a></li>
  <li><a href="/ghost-publishing/">Will John…</a></li>
  <li><a href="/days-of-wine/">The Film That…</a></li>
</ul>

<h4><a href="/author/sara/">Sara James</a></h4>
<ul>
  <li><a href="/managing-ghost/">How to Think…</a></li>
  <li><a href="/the-new-rules/">The New Rules…</a></li>
  <li><a href="/eddie-kim-somehow-/">Eddie Kim…</a></li>
</ul>

That’s all that I wanted to share today, and I hope you find this post useful.

Checkout previous parts of the Ghost Tips & Tricks series:

Also, check out my Ghost Websites Inspiration and Ghost Newsletter series.

Stay safe!

Ahmad

4 Likes
2

This is great @ahmadajmi, thanks!

By including this with some other theme “trickery” one can create a page with both staff members and writers, the two groupings separated from each other. :wink:

2 Likes