Top User List Template | Axero Documentation

The Top User List template displays a leaderboard. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a People Widget to a Page Builder page
2. Edit the widget
3. Set the type to Top People List
4. Select the Top User List template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-widget {{CustomCSSClass}}{{#if HideContainerBorder}} axero-widget-no-border{{/if}}">

    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    
    <div class="axero-widget-content">
            <ul id="widgetTabs{{WidgetID}}" class="nav nav-tabs">
              <li {{#if (compare Contents.TopUsersActiveTab '==' 4)}}class="active" {{/if}}><a href="#alltime{{WidgetID}}" data-toggle="pill" data-range="4">{{Resources.TopContributorsAllTimeText}}</a></li>
              <li {{#if (compare Contents.TopUsersActiveTab '==' 3)}}class="active" {{/if}}><a href="#lastthirtydays{{WidgetID}}" data-toggle="tab" data-range="3">{{Resources.TopContributorsLastThirtyDaysText}}</a></li>
              <li {{#if (compare Contents.TopUsersActiveTab '==' 2)}}class="active" {{/if}}><a href="#thisweek{{WidgetID}}" data-toggle="tab" data-range="2">{{Resources.TopContributorsThisWeekText}}</a></li>
              <li {{#if (compare Contents.TopUsersActiveTab '==' 1)}}class="active" {{/if}}><a href="#today{{WidgetID}}" data-toggle="tab" data-range="1">{{Resources.TopContributorsTodayText}}</a></li>
            </ul>
            
            <div id="widgetTabsContent{{WidgetID}}" class="tab-content">
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 4)}} active in{{/if}}" id="alltime{{WidgetID}}">                
                
                <ul class="axero-top-contributors">
                   {{#each Contents.AllTime}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}               
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
                
              </div>
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 3)}} active in{{/if}}" id="lastthirtydays{{WidgetID}}">
                <ul class="axero-top-contributors">
                   {{#each Contents.LastThirtyDays}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>                         
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}               
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               

              </div>
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 2)}} active in{{/if}}" id="thisweek{{WidgetID}}">
                <ul class="axero-top-contributors">
                   {{#each Contents.ThisWeek}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>

                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>                         
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}                
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
              </div>
              <div class="tab-pane fade list {{#if (compare Contents.TopUsersActiveTab '==' 1)}} active in{{/if}}" id="today{{WidgetID}}">
                <ul class="axero-top-contributors">
                   {{#each Contents.Today}}
                    <li>
                        <div class="axero-section-list-avatar">
                            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}">
                                <img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}"></a>
                        </div>
                        <div class="axero-section-list-content">
                            <div class="axero-top-contributors-user-name">
                                <a class="axero-user-card-link" href="{{ProfileURL}}" data-pjax="" data-user="{{UserID}}">{{{trim UserInfoDisplayName ../TitleCharacterLength}}}</a>                         
                            </div>
                            <div class="axero-top-contributors-user-rank">
                                <img alt="{{{RankName}}}" src="{{RankImage}}">&nbsp;<span class="axero-user-rank-name">{{{RankName}}}</span> {{Points}} {{../Resources.GlobalPointText}}                
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>               
              </div>
            </div> 
            
    </div>
    
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
    </div>
    {{/if}}
</div>

<script type="text/javascript">
    jQuery(function() {
        var $widgetTabs = $('#widgetTabs{{WidgetID}}')
            spinner = $('#spinner-absolute-center');
            
       $widgetTabs.click(function (e) {
            var me = $(e.target);
            var tabSelector = me.attr('href');
            var tab = $(tabSelector);
            if (tab.find('li').length == 0) {
                spinner.show();
                var range = me.attr('data-range');
                var url = Communifire.buildApiUrl('/pb/widgets/{{WidgetID}}/html');
                url = Communifire.Utilities.appendQueryString(url, 'filter', range);
                $.cfAjax({
                    type: 'GET',
                    url: url,
                    success: function (response) {
                        var newWidget = $(response);
                        var newTab = newWidget.find(tabSelector);
                        tab.find('ul').html(newTab.find('ul').html());
                        spinner.hide();
                    }
                });
            }
        });
    });
</script>