Top User List - With Badges Template | Communifire Documentation

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

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

Template HTML

Below is the HTML of this template, for your reference.

<div class="axero-section {{CustomCSSClass}}">
    <div class="axero-date-range-picker pull-right">
        <div id="drpRangePicker{{WidgetID}}">
            <span>{{Resources.TopContributorsAllTimeText}}</span> <i class="icon-caret-down"></i>
        </div>
    </div>
    {{#if ShowWidgetHeader}}
    <h3>{{{WidgetTitle}}}</h3>
    {{/if}}
    <ul class="ax-rec-leaderboard" id="Leaderboard{{WidgetID}}">
        {{#each Contents.RangeList}}
        <li>
            <div class="l-rank">{{math @index "+" 1}}</div>
            <div class="l-user">
                <span class="l-user-avatar">
                    <img src="{{AvatarImageURL}}" />
                </span>
                <span class="l-user-info">
                    <span class="l-user-info_name"><a class="axero-user-card-link" data-user="{{UserID}}" href="{{ProfileURL}}">
                            {{{UserInfoDisplayName}}}
                        </a></span>
                    <span class="l-user-info_counts">{{../Resources.InboxSentText}}: {{RecognitionSentCount}} {{../Resources.RecognitionsReceivedText}}: {{RecognitionReceivedCount}}</span>
                </span>
            </div>
			{{#if ../Contents.PointsEnabled}}
            <div class="l-points">
                <span class="l-points-total">{{Points}} {{../Resources.GlobalPointText}} </span>
                <span class="l-points-rank">
                    <img src="{{RankImage}}" />
                    <span class="l-points-rank_name">{{{RankName}}}</span>
                </span>
            </div>
			{{/if}}
            <div class="l-badges">
                {{#each Recognitions}}
                <a href='{{ContentURL}}'><img src="{{ContentFeaturedImageFullURL}}" /></a>
                {{/each}}
                {{#if (compare Recognitions.Count "<" RecognitionCount)}}
                <span class="l-more">+ <a href="{{ProfileRecognitionsURL}}">{{math RecognitionCount "-" Recognitions.Count}} {{../Resources.GlobalMoreText}}</a></span>
                {{/if}}
            </div>
        </li>
        {{/each}}
    </ul>
	{{#unless Contents.RangeList}}{{Resources.NoLeadersText}}{{/unless}}
</div>

<script type="text/javascript">
    jQuery(function() {
        var spinner = $('#spinner-absolute-center');
        Communifire.Modals.DateRangePicker.init({
            element: $('#drpRangePicker{{WidgetID}}'),
            format: '{{Contents.DateFormat}}',
            onSelected: function (start, end) {
                var range;
                if (start) {
                    range = start.toString('{{Contents.DateFormat}}') + ' - ' + end.toString('{{Contents.DateFormat}}');
                    $('#drpRangePicker{{WidgetID}} > span').html(range);
                }
                else {
                    range = '';
                    $('#drpRangePicker{{WidgetID}} > span').html('{{{Resources.TopContributorsAllTimeText}}}');
                }
                var url = Communifire.buildApiUrl('/pb/widgets/{{WidgetID}}/html');
                if (range) url = Communifire.Utilities.appendQueryString(url, 'filter', range);
                $.cfAjax({
                    type: 'GET',
                    url: url,
                    success: function (response) {
                        var newWidget = $(response);
                        var newUL = newWidget.find('.ax-rec-leaderboard');
                        if (newUL.length > 0)
                            $('#Leaderboard{{WidgetID}}').html(newUL.html());
                        else $('#Leaderboard{{WidgetID}}').html('');
                        spinner.hide();
                    }
                });
            }
        });
    });
</script>