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 .
Here are the scenarios I will cover, and I hope you can adapt them to your use case:
- Changing all authors to a standard, single agent
- Changing all translations in a certain language to a specific author
- Selectively changing authors on articles by author ID
- Selectively changing authors on articles by article ID
- Combining multiple criteria to specify the new author
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.
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
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
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 IDs.
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.