Skip to main content
MindTouch Success Center

Add an author bar to a page

An author bar is a container that exists above your article's content section that can display the author's image, name, job title, and company. This container is automatically generated when you assign an author to a page via a custom classification.

Author bars provide a quick way for your viewers to identify the author of the content they are reading and learn more about them. Your audience may want to know that your authors are experts in their field and have authority on a given topic. Linking to their credentials, their job title, and the company they work for will help convey that knowledge authority.

Screenshot of an author bar

Create an author bar

Create a custom classification for your authors
  1. On the MindTouch toolbar, navigate to Site tools > Control panel.
  2. In the control panel, select Systems Settings > Classifications.
  3. Add a custom classification for your site authors:
    • Prefix: authorname
    • Label: Author
  4. If you have an existing author classification you would rather use, you will need to update the reference to it in the Dekiscript code in Step 2.
  5. Scroll down to your new author classification and add each of your author tags and labels. You may want to add these in alphabetical order to make it easier to select them in page settings.
    • Tag: theresam
    • Label: Theresa Manzo
  6. Now that you have added the new author custom classification, you can navigate to any article, open the page settings, and assign an author to it.
Add the author bar code to your content header template
  1. Copy and paste the following code into your custom content header template located at /Template:Custom/Views/ContentHeader.
var tagList = map.keyvalues(page.tags);
var authorName = '';

// Add author information in this object. Replace the existing names and information with your own.
var authors = {
    "theresam": {
        "name": "Theresa Manzo",
        "nameurl": "",
        "nametitle": "Product Manager",
        "companyname": "MindTouch",
        "companyurl": "",
        "pictureurl": ""
    "lilym": {
        "name": "Lily Moessel",
        "nameurl": "",
        "nametitle": "Documentation Architect",
        "companyname": "MindTouch",
        "companyurl": "",
        "pictureurl": ""
// End author information

// Look through the page's tag list, find the one for 'authorname', display the bar with the correct information
foreach(var tag in tagList where string.contains(tag.key, 'authorname:')) {
    var authorName = string.replace(, 'authorname:', '', true);
    if(authorName) {
        <div class="mt-author-container">
                // Only show the image if there is a URL defined
                if (authors[authorName].pictureurl) {
                    <li class="mt-author-image mt-author-image-crop"><img src=(authors[authorName].pictureurl) title=(authors[authorName].name) /></li>
                <li class="mt-author-information">
                    <span class="mt-author-written"> 'Written by ' </span>
                    if(authors[authorName].nameurl) {
                        <a rel="external" target="_blank" href=(authors[authorName].nameurl)> authors[authorName].name </a>
                    } else {
                // Only show this section if a companyname is set
                if(authors[authorName].companyname) {
                    <li class="mt-author-companyname">
                        if(authors[authorName].nametitle) {
                            <span class="mt-author-nametitle">
                                <span> authors[authorName].nametitle </span>
                                <span> ' at ' </span>
                        if(authors[authorName].companyurl) {
                            <a rel="external" target="_blank" href=(authors[authorName].companyurl)> authors[authorName].companyname </a>
                        } else {
                            <span> authors[authorName].companyname </span>
  1. Save your page after updating your author information in the var authors object found on line 5. You will need to use your classification's tag (i.e. theresam) to identify each author in the object.

Screenshot of author object in dekiscript code

  1. If you called your custom classification by a different prefix, then you will need to update references to authorname in the following piece of code with the prefix of the classification you are using.

Screenshot of the author classification reference

Add the custom CSS to your control panel
  1. On the MindTouch toolbar, navigate to Site tools > Control panel.
  2. In the control panel, select Branding > Custom Site CSS.
  3. In the All Roles CSS text field, add the following CSS.
/* author bar */
.mt-author-container {
    background: @secondary-container-background-color;
    border: 1px solid @secondary-container-border-color;
    border-radius: @border-radius-default;
    clear: both;
    color: @tertiary-font-color;
    font-size: 85%;
    margin: 0 0 1em;
    overflow: hidden;
    padding: .5em 1em;
.mt-author-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
.mt-author-container .mt-author-image {
    float: left;
    margin: 0 1em 0 0;
.mt-author-container .mt-author-image-crop {
    border: 1px solid @primary-container-border-color;
    border-radius: 50%;
    height: 3em;
    overflow: hidden;
    position: relative;
    width: 3em;
.mt-author-container .mt-author-image-crop img {
    display: inline;
    height: 100%;
    margin: 0 auto;
    width: auto;
.mt-author-container img {
    max-height: 3em;
    max-width: 3em;
    vertical-align: middle;
  1. Click Save.
  2. To verify your author bar works, navigate to your article with an author already assigned and you should see your new author bar.
  • Was this article helpful?