Displaying an alternative author on your articles Follow

From time to time, the need to update the author of an article comes along. If you are familiar with APIs and/or cURL requests, you could update the author by following our documentation here .

But there's a chance you aren't familiar with those types of services, maybe you want to set articles in a certain language to show a specific author, or you would like to  retain the author's name internally, but publicly you want to have a unified or generic author name. Really, the scenarios are endless on why you might want to change an author name, and I hope to give you the details on how to get started with this by using our Help Center templating language .

Note: This article only addresses changes made to the article template. There are some situations, like on the Search Results page or email subscription notifications, that the author name appears. You may be able to use similar techniques to those found in this article on any template pages, or you may be able to remove the author name altogether. The subscription email cannot be altered at this time.

Here are the scenarios I will cover, and I hope you can adapt them to your use case:

Changing all authors to a single agent

I am going to be working on the Swiftest Elk theme here. If you are working with some of our other themes, similar principles may be used, but the code may be slightly different. Make sure you compensate for the nuances of the different themes when implementing this type of customization.

The default article page on the Swiftest Elk theme looks a bit like this:

In that theme, the default code on the Article template looks something like this:

<div class="article-avatar">
<img src="{{article.author.avatar_url}}" alt="Avatar"/>
</div>
<div class="article-meta">
<strong class="article-author" title="{{article.author.name}}">
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">{{article.author.name}}</a>
{{else}}
{{article.author.name}}
{{/if}}
</strong>

That default code can be found here on the default article template page in the Swiftest Elk theme:

We will need to change just a couple of items to set our universal author including the avatar and name. To reduce confusion, I'm just going to remove the author URL and just show a picture and a name. I uploaded a new avatar to my assets as described here , and then I use the asset helper to call in that image. Here is the code I used:

<div class="article-avatar">
{{! User image changed here}}
<img src="{{asset 'user_image.jpg'}}" alt="Avatar"/>
</div>
<div class="article-meta">
{{! 'title' text and name changed here}}
<strong class="article-author" title="Help Desk Support">
Help Desk Support
</strong>

And here is what we get as the result:

We have successfully applied an author name and are showing a new image in place of the actual author's avatar. Now we'll build upon this and set a condition which will only show the change on translations of articles in a specific language/locale.

Changing all translations in a certain language to a specific author

Depending on your support situation, it may make sense to show the name of an agent who is responsible for handling tickets in a particular language rather than the user who was creating the content for your Help Center. We can use some logic to check the current locale via the help_center object and determine the outcome from there.

Note: The conditional statements checking the help_center.url property will not work in 'Preview', but will only work on a Published theme. This is because we make some special adjustments to URLs so that you can click between pages when previewing and editing themes.

The default code is the same as above. With some additional conditions, we can make the experience work similar to the last solution:

<div class="article-avatar">
{{! Checking the current locale value to replace the avatar}}
<img src="{{#is help_center.url '/hc/en-us'}}
{{asset 'user_image.jpg'}}
{{else}}
{{article.author.avatar_url}}
{{/is}}" alt="Avatar"/>
</div>
<div class="article-meta">
{{! Checking the current locale to set the author name}}
{{#is help_center.url '/hc/en-us'}}
<strong class="article-author" title="Language Support Team">
Language Support Team
{{! Fallback if current locale doesn't match above}}
{{else}}
<strong class="article-author" title="{{article.author.name}}">
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
{{/is}}
</strong>

You may have to visit your Help Center in your desired locale to get the text string to replace my /hc/en-us above. If you want to set multiple conditions, you can either nest the #is conditional statements inside of one another, or set an independent statement for each one of your locales. If you're interested in these types of conditional statements (is, if, each), you can read more here .

Selectively changing authors on articles by author id

Note: You can also change the author for an article in the UI. See Changing the author for an article .

It's possible you may run into a situation where one of your main contributors leaves the company or moves into a bigger and better role, but you would like to have the face of someone in Support on your articles. By using a conditional statement, we can check the author's identity and then replace their info with one of your remaining agents.

<div class="article-avatar">
{{! Checking the identity of the author to replace the avatar}}
<img src="{{#is article.author.id 319145489}}
{{asset 'user_image.jpg'}}
{{else}}
{{article.author.avatar_url}}
{{/is}}" alt="Avatar"/>
</div>
<div class="article-meta">
{{! Checking the identity of the author to replace the name with 'John Smith'}}
{{#is article.author.id 319145489}}
<strong class="article-author" title="Jill Smith">
Jill Smith
</strong>
{{! Fallback if author is not user 319145489}}
{{else}}
<strong class="article-author" title="{{article.author.name}}">
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
{{/is}}
</strong>

You will want to replace my 319145489 with the id of your user who you are looking to replace as the author, and with this solution all other articles will still appear with their current authors. Only user 319145489 's articles will be affected.

Selectively changing authors on articles by article id

Note: You can also change the author for an article in the UI. See Changing the author for an article .

Very similar to the last solution, you can change the author by utilizing a specific article's id. Maybe you want to have an article on a specific topic appear as being authored by a different agent. Here how we would get this done:

<div class="article-avatar">
{{! Checking the article id to replace the avatar}}
<img src="{{#is article.id 208598226}}
{{asset 'user_image.jpg'}}
{{else}}
{{article.author.avatar_url}}
{{/is}}" alt="Avatar"/>
</div>
<div class="article-meta">
{{! Checking the article id to replace the name}}
{{#is article.id 208598226}}
<strong class="article-author" title="John Smith">
John Smith
</strong>
{{! Fallback if article id is not 208598226}}
{{else}}
<strong class="article-author" title="{{article.author.name}}">
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
{{/is}}
</strong>

I recommend using this solution in a limited fashion. The is helper cannot check if an article equals multiple values (like an or statement), so you would have to nest multiple conditional statements within one another to check multiple article id's.

Combining multiple criteria to specify the new author

Now we're looking for the big one! The idea that comes to mind here is that I have an agent who I want to show as the author for all of my content in a specific language, but I only want to replace one author. You can setup multiple conditional statements to check properties like author id and the locale, and then take action on those conditions like this:

<div class="article-avatar">
<img src="{{#is help_center.url '/hc/ar'}}
{{#is article.author.id 319145489}}
{{! Avatar value if author is 319145489 and language is Arabic}}
{{asset 'user_image.jpg'}}
{{else}}
{{! Avatar value if author is not 319145489 and language is Arabic}}
{{article.author.avatar_url}}
{{/is}}
{{else}}
{{! Avatar value if language is not Arabic}}
{{article.author.avatar_url}}
{{/is}}" alt="Avatar"/>
</div>
<div class="article-meta">
{{#is help_center.url '/hc/ar'}}
{{#is article.author.id 319145489}}
{{! Author name if author id is 319145489 and language is Arabic}}
<strong class="article-author" title="John Smith">
John Smith
{{else}}
{{! Start Author Name if Arabic and not author 319145489}}
<strong class="article-author" title="{{article.author.name}}">
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
{{/is}}
{{else}}
{{! Start author name if not Arabic}}
<strong class="article-author" title="{{article.author.name}}">
{{#if article.author.url}}
<a href="{{article.author.url}}" target="_zendesk_lotus">
{{article.author.name}}
</a>
{{else}}
{{article.author.name}}
{{/if}}
{{/is}}
</strong>

Due to the way conditional statements work, we had to repeat some code here to satisfy all of the scenarios, but now we have successfully replaced a specific author when they appear on articles only in Arabic.

Wrap-Up

As you've seen here, there are lots of ways to dynamically update your Help Center pages by using some conditional statements. They're great to really help you fine tune anything surrounding articles, sections, and categories due to there being unique identifiers which will let you manipulate or add particular parts of the page.

I hope this article serves you well as you push forward in customizing your Help Center. Please comment below if you have any questions or you want to share a way you have implemented a similar idea in your Help Center.

Have more questions? Submit a request

Comments

  • 0

    Very interesting but i'm not a programmer, just a Zendesk user who do not want to enter in the code.

    Is there a plan to have the possibility to edit the Author of an Article directly from the User interface?

  • 1

    Hi Shlomo,

    You're timing is great! We actually just added this feature to our new article editor page. It is currently in Beta, but if you are interested in signing up to add that to your account, you can check it out here.

    Hope this helps!

  • 0

    Hi Jake

    Did the new article editor page you were discussing 11july 2016 make it into production.or is it still in beta

  • 0

    Hi Jennifer,

    Yes, that is available for everyone!

    So now there is a dropdown on the article editor page where you can choose a different author on your articles.

  • 0

    ok So we can see how we can change from one agent's name as author to another agents name but is there a way to change the author to a standard " Help Desk Support "

  • 0

    Hi Jennifer,

    The dropdown only lets you select an agent who exists in your account. You would want to use some of the customizations mentioned above if you want to use a fake agent.

  • 0

    Still great and very useful article! Thank you Jake for sharing!

Please sign in to leave a comment.

Powered by Zendesk