Top Content List Tabs - No Featured Image Template | Communifire Documentation

The Top Content List Tabs - No Featured Image template displays a tabbed list of top content in your intranet. The template is a built-in template and comes with your Communifire site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the Top Content List Tabs - No Featured Image 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 axero-widget-content-padded axero-widget-content-tabs">
        <ul id="contentlistTabs{{WidgetID}}" class="nav nav-tabs ax-entity-topcontent-filter-tabs">
            <li {{#if (compare Contents.ActiveTab '==' 1)}}class="active" {{/if}}><a href="#mostRecent{{WidgetID}}" data-toggle="pill" data-value="1">{{Resources.GlobalMostRecentText}}</a></li>
            <li {{#if (compare Contents.ActiveTab '==' 2)}}class="active" {{/if}}><a href="#mostViewed{{WidgetID}}"  data-toggle="tab"  data-value="2">{{Resources.MostViewedText}}</a></li>
            {{#if Contents.RatingEnabled}}<li {{#if (compare Contents.ActiveTab '==' 3)}}class="active" {{/if}}><a href="#highestRated{{WidgetID}}"  data-toggle="tab"  data-value="3">{{Resources.HighestRatedText}}</a></li>{{/if}}
            {{#if Contents.CommentsEnabled}}<li {{#if (compare Contents.ActiveTab '==' 4)}}class="active" {{/if}}><a href="#mostCommented{{WidgetID}}"  data-toggle="tab"  data-value="4">{{Resources.MostCommentedText}}</a></li>{{/if}}
        </ul>
        <div id="contentlistTabs{{WidgetID}}" class="tab-content">
        <div class="tab-pane fade {{#if (compare Contents.ActiveTab '==' 1)}} active in{{/if}}" id="mostRecent{{WidgetID}}">  
        <ul class="articlelist">
            {{#each Contents.MostRecentContent}}
            <li>
                <div class="row-fluid ct-list-content">
                    <div class="span12">
                        <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                        <div class="axero-article-list-description">
                            {{{Summary}}}
                        </div>
                        <div class="row-fluid ct-list-options">
                            <div class="span5">
                                <div class="p-user">
                                    <div class="p-avatar">
                                        <a href="{{AuthorUserProfileURL}}"><img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" /></a>
                                    </div>
                                    <div class="p-user-info">
                                        <div class="p-user-name">
                                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
                                        </div>
                                        <div class="p-publish-date">
                                            {{DateCreatedString}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {{/each}}
            
        </ul>
        </div>
        <div class="tab-pane fade {{#if (compare Contents.ActiveTab '==' 2)}} active in{{/if}}" id="mostViewed{{WidgetID}}">  
        <ul class="articlelist">
            {{#each Contents.MostViewedContent}}
            <li>
                <div class="row-fluid ct-list-content">
                    <div class="span12">
                        <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                        <div class="axero-article-list-description">
                            {{{Summary}}}
                        </div>
                        <div class="row-fluid ct-list-options">
                            <div class="span5">
                                <div class="p-user">
                                    <div class="p-avatar">
                                        <a href="{{AuthorUserProfileURL}}"><img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" /></a>
                                    </div>
                                    <div class="p-user-info">
                                        <div class="p-user-name">
                                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
                                        </div>
                                        <div class="p-publish-date">
                                            {{DateCreatedString}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {{/each}}
            
        </ul> 
        </div>
        <div class="tab-pane fade {{#if (compare Contents.ActiveTab '==' 3)}} active in{{/if}}" id="highestRated{{WidgetID}}">          
        <ul class="articlelist">
            {{#each Contents.HighestRatedContent}}
            <li>
                <div class="row-fluid ct-list-content">
                    <div class="span12">
                        <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                        <div class="axero-article-list-description">
                            {{{Summary}}}
                        </div>
                        <div class="row-fluid ct-list-options">
                            <div class="span5">
                                <div class="p-user">
                                    <div class="p-avatar">
                                        <a href="{{AuthorUserProfileURL}}"><img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" /></a>
                                    </div>
                                    <div class="p-user-info">
                                        <div class="p-user-name">
                                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
                                        </div>
                                        <div class="p-publish-date">
                                            {{DateCreatedString}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {{/each}}
            
        </ul>   
        </div>
        <div class="tab-pane fade {{#if (compare Contents.ActiveTab '==' 4)}} active in{{/if}}" id="mostCommented{{WidgetID}}">          
        <ul class="articlelist">
            {{#each Contents.MostCommentedContent}}
            <li>
                <div class="row-fluid ct-list-content">
                    <div class="span12">
                        <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                        <div class="axero-article-list-description">
                            {{{Summary}}}
                        </div>
                        <div class="row-fluid ct-list-options">
                            <div class="span5">
                                <div class="p-user">
                                    <div class="p-avatar">
                                        <a href="{{AuthorUserProfileURL}}"><img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" /></a>
                                    </div>
                                    <div class="p-user-info">
                                        <div class="p-user-name">
                                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
                                        </div>
                                        <div class="p-publish-date">
                                            {{DateCreatedString}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {{/each}}
            
        </ul> 
        </div>
        </div>
    </div>
    
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
		{{{FooterHTML}}}
        <a class="small hide" href="#">{{Resources.GlobalAllSmallText}} <i class="icon-double-angle-right"></i></a>
    </div>
    {{/if}}
    
</div>
<script type="text/javascript">
    jQuery(function () {
        var $widgetTabs = $('#contentlistTabs{{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 val = me.attr('data-value');
                var url = Communifire.buildApiUrl('/pb/widgets/{{WidgetID}}/html');
                url = Communifire.Utilities.appendQueryString(url, 'filter', val);

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