The Top Content List Tabs - Default 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:
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="span4"> <a href="{{ContentURL}}"><img class="axero-article-list-image postTitleImage" src="{{ContentImageURL}}" alt="{{{Title}}}" /></a> </div> <div class="span8"> <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 class="span7 ct-list-options-stats"> <div class="opt opt-counts pull-right"> <ul> {{#if ../Contents.CommentsEnabled}}<li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>{{/if}} <li class="views"><a rel="tooltip"><span class="icon-eye-open"></span> {{PageViews}}</a></li> </ul> </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="span4"> <a href="{{ContentURL}}"><img class="axero-article-list-image postTitleImage" src="{{ContentImageURL}}" alt="{{{Title}}}" /></a> </div> <div class="span8"> <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 class="span7 ct-list-options-stats"> <div class="opt opt-counts pull-right"> <ul> {{#if ../Contents.CommentsEnabled}}<li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>{{/if}} <li class="views"><a rel="tooltip"><span class="icon-eye-open"></span> {{PageViews}}</a></li> </ul> </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="span4"> <a href="{{ContentURL}}"><img class="axero-article-list-image postTitleImage" src="{{ContentImageURL}}" alt="{{{Title}}}" /></a> </div> <div class="span8"> <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 class="span7 ct-list-options-stats"> <div class="opt opt-counts pull-right"> <ul> {{#if ../Contents.CommentsEnabled}}<li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>{{/if}} <li class="views"><a rel="tooltip"><span class="icon-eye-open"></span> {{PageViews}}</a></li> </ul> </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="span4"> <a href="{{ContentURL}}"><img class="axero-article-list-image postTitleImage" src="{{ContentImageURL}}" alt="{{{Title}}}" /></a> </div> <div class="span8"> <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 class="span7 ct-list-options-stats"> <div class="opt opt-counts pull-right"> <ul> {{#if ../Contents.CommentsEnabled}}<li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>{{/if}} <li class="views"><a rel="tooltip"><span class="icon-eye-open"></span> {{PageViews}}</a></li> </ul> </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 e=jQuery("#spinner-absolute-center");jQuery("#contentlistTabs{{WidgetID}}").click(function(t){var i=jQuery(t.target),r=i.attr("href"),n=jQuery(r);0==n.find("li").length&&(e.show(),jQuery.cfAjax({type:"GET",url:Communifire.buildApiUrl("/pb/widgets/{{WidgetID}}/html?spaceID="+CF_SPACEID+"&filter="+i.attr("data-value")),success:function(t){var i=jQuery(t).find(r);n.find("ul").html(i.find("ul").html()),e.hide()}}))})}); </script>
Hi,
I have tried this and it shows empty. Can you please help?
Thanks,
Jeddi
Maybe CSS missing? or this was not updated for the latest version?
it shows like this:
Hi A Jeddi,
Could you let us know what version your site is on? The version should be at the bottom of the page. You can also go to Control Panel > System > Communifire Version to get the version.
Grace
The version is: Communifire ™ Version 7.0.7367.30213
Try to Reset Page Builder Template in Control Panel > System > Page Builder Templates. Does this fix the widget?
If not, try viewing the page then checking for errors in Control Panel > System > Exception Log . Are there any recent errors?
Hi Grace,
I did both and nothing happened. What should I do?
Thanks.
Did you manually create the template on your site, or is it a default template? You may be on a version from before the Top Content List widget was added to Communifire.
To check, go to Control Panel > System > Page Builder, under Widget Type select Content List, and edit the template. Click the gear icon. Do you see an option to delete or reset?
Also click Add a new template, and select Content list under Widget Type. Do you see the Widget Sub Type menu? Is Top Content List Tabs listed in that menu?
@grace Thank you so much for your detailed reply. I checked and we are on an older version as I don't have those options. how can we upgrade it?
Thanks,Jeddi
Our team will help you with the update in the case you created.
Please enable JavaScript to use file uploader.
is requesting access to a wiki that you have locked: https://my.axerosolutions.com/spaces/5/communifire-documentation/wiki/view/39414/top-content-list-tabs-default-template