Loading ...

Top Content List Tabs - Default Template | Communifire Documentation

Home » communifire documentation » Wiki » Documentation » Control Panel » System » Page Builder » Page Builder Templates » Content List Templates » Top Content List Tabs - Default Template
Communifire Documentation  Wiki
Public Space
Activity Stream Content
Version 2

Top Content List Tabs - Default Template

0 
 /5
0 (0votes) 

<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>
            <li {{#if (compare Contents.ActiveTab '==' 3)}}class="active" {{/if}}><a href="#highestRated{{WidgetID}}"  data-toggle="tab"  data-value="3">{{Resources.HighestRatedText}}</a></li>
            <li {{#if (compare Contents.ActiveTab '==' 4)}}class="active" {{/if}}><a href="#mostCommented{{WidgetID}}"  data-toggle="tab"  data-value="4">{{Resources.MostCommentedText}}</a></li>
        </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>
                                        <li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>
                                        <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>
                                        <li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>
                                        <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>
                                        <li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>
                                        <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>
                                        <li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>
                                        <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">
        <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>

 

Comments (1)

   
opecfund
A Jeddi

Hi,

I have tried this and it shows empty. Can you please help?

Thanks,

Jeddi

8/6/2020 01:52 PM
 · 
Comment
by
   
opecfund
A Jeddi

Maybe CSS missing? or this was not updated for the latest version?

8/6/2020 01:53 PM
 · 
Comment
by
   
opecfund
A Jeddi

it shows like this:

8/6/2020 01:54 PM
 · 
Comment
by
   
gskamau
Grace Kamau

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

8/6/2020 04:39 PM
 · 
Comment
by
   
opecfund
A Jeddi

The version is: Communifire ™ Version 7.0.7367.30213

8/7/2020 07:36 AM
 · 
Comment
by
   
gskamau
Grace Kamau

Hi A Jeddi,

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?

Grace

8/7/2020 04:27 PM
 · 
Comment
by
   
opecfund
A Jeddi

Hi Grace,

I did both and nothing happened. What should I do?

Thanks.

8/7/2020 08:31 PM
 · 
Comment
by
   
gskamau
Grace Kamau

Hi A Jeddi,

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

8/7/2020 08:47 PM
 · 
Comment
by
   
opecfund
A Jeddi

@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

8/10/2020 06:57 AM
 · 
Comment
by
   
gskamau
Grace Kamau

Hi A Jeddi,

Our team will help you with the update in the case you created.

Grace

8/10/2020 03:29 PM
 · 
Comment
by
Add a new comment

Wiki Index

Pages

Intranet Software