Stacked List with Infinite Scroll Template | Communifire Documentation

You can add an infinite scroll version of the Stacked List template to your site.

Add Template

1. Click the gear icon > Page Builder > Templates.
2. Click Add a new template.
3. Enter Stacked List with Scroll as the Template Name.
4. Select Content List as the Widget Type.
5. Select Content List as the Widget Sub Type.
6. In Resource Keys CSV, enter GlobalByText.
7. In the editor, paste the following code.

   <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">
           <ul class="thumbnails ax-magazine-one-stack" id="ScrollContainer{{WidgetID}}"> 
           
               {{#each Contents}}
               <li class="span12">
                   <div class="thumbnail">
                       <a href="{{ContentURL}}"><img src="{{ContentImageURL}}" alt="{{{Title}}}" /></a>
                       <div class="hero-overlay">
                           <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                           <p class="meta small">{{DateCreatedString}}&nbsp;&#8901;&nbsp;<i class="icon-comment"></i> {{CommentCount}}</p>
                           <p class="description-a">{{{Summary}}}</p>
           				<div class="small nobold">
   							{{../Resources.GlobalByText}}: <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
   						</div>
                       </div>
                   </div>
               </li>
               {{/each}}
               
           </ul>
       </div>
       
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
           {{{FooterHTML}}}
       </div>
       {{/if}}
       
   </div>
   {{{ScriptBlock}}}
   <style> #ScrollContainer{{WidgetID}} {height:790px;overflow:scroll;} </style>

8. Click Save Template.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a layout onto the page.
3. Click the Widgets tab.
4. Drag a Content List widget onto the page.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure the widget properties.
8. Click Template.
9. Select the Stacked List with Scroll template.
10. Click Advanced.
11. Check Infinite scroll.
12. Click Save Widget.
13. Click Publish changes.
14. Click Go to page.
    

Adjust Widget Height

If you placed the Content List widget in a wide column, you may need to adjust the widget height to enable the scroll.

1. Click the gear icon > Page Builder > Templates.
2. In Widget Type, select Content List.
3. Click the Stacked List with Scroll template.
4. At the bottom of the template code, replace 790px with a smaller number.
5. Click Save Template.

Related

How to Add Infinite Scroll to a Content List Template