Skip to main content
MindTouch Success Center

Add an author bar to a page

Written by Theresa Manzo
Product Manager at MindTouch
This page applies to:MindTouch (current)

To personalize your documentation, add a page bar with details about the author or show article stats.


What is an author bar?


An author bar is a container that exists above your article's content section that displays the article 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.

Screenshot of an author bar
 

Why should I use an author bar?


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 wants to know that your authors are experts in their field and know what they are talking about. Linking to their credentials, their job title, and the company they work for will help convey that knowledge authority.
 

Prerequisites


How do I create an author bar?


Step 1: Create a custom classification for your authors

  1. On the MindTouch toolbar, navigate to Site tools > Control panel.

toolbar_control_panel.png

  1.  the control panel, select Systems Settings > Classifications.

  1. Add a custom classification for your site authors:
  • Prefix: authorname
  • Label: Author

Screenshot for adding in the custom author classification

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.

  1. 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

Screenshot of a classification option added in the control panel

  1. 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.

Screenshot of newly created author classification
 

Step 2: 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": "https://www.linkedin.com/in/theresa-manzo-92788154",
        "nametitle": "Product Manager",
        "companyname": "MindTouch",
        "companyurl": "https://mindtouch.com",
        "pictureurl": "https://success.mindtouch.com/%40api/deki/files/18350/%3Dtheresa_manzo?origin=mt-web"
    },
    "lilym": {
        "name": "Lily Moessel",
        "nameurl": "https://www.linkedin.com/in/lily-m-7097048",
        "nametitle": "Documentation Architect",
        "companyname": "MindTouch",
        "companyurl": "https://mindtouch.com",
        "pictureurl": "https://success.mindtouch.com/%40api/deki/files/18349/%3Dlily_moessel?origin=mt-web"
    }
};
// 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(tag.value.name, 'authorname:', '', true);
    if(authorName) {
        <div class="mt-author-container">
            <ul>
                
                // 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 {
                        authors[authorName].name;
                    }
                </li>
                
                // 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>
                            </span>
                        }
                        if(authors[authorName].companyurl) {
                            <a rel="external" target="_blank" href=(authors[authorName].companyurl)> authors[authorName].companyname </a>
                        } else {
                            <span> authors[authorName].companyname </span>
                        }
                    </li>
                }
            </ul>
        </div>
    }
}
  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 classification tag value

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

Step 3: 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.

Step 4: 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?