Stacked List Small Image Template | Communifire Documentation

The Stacked List Small Image template is perfect for displaying content in narrow columns.

Add Template

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

   <div class="axero-widget axero-widget-stacked-small-image {{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> 
               {{#each Contents}}
               <li>
                   <div class="z-photo">
                       <a href="{{ContentURL}}"><img src="{{ContentImageURL}}" alt="{{{Title}}}" /></a>
                   </div>
                   <div class="z-info">
                       <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                       <div class="z-date">{{DateCreatedString}}&nbsp;&#8901;&nbsp;<i class="icon-comment"></i> {{CommentCount}}</div>
                       <div class="z-usr">{{../Resources.GlobalByText}}: <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a></div>
                   </div>
               </li>
               {{/each}}
           </ul>
       </div>
       
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
           
       </div>
       {{/if}}
       
   </div>

8. Click Save Template.

Add CSS Overrides

1. Click System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Stacked List Small Image template*/
   .axero-widget-stacked-small-image ul{list-style:none;margin:0;padding:0;}
   .axero-widget-stacked-small-image ul li{overflow: hidden;border-top: 1px solid #efefef;padding-top: 15px;margin-top: 15px;}
   .axero-widget-stacked-small-image ul li:first-child{border-top:0;padding-top:0;margin-top:0;}
   .axero-widget-stacked-small-image ul li .z-photo{max-width:100px;float:left;}
   .axero-widget-stacked-small-image ul li .z-photo img{border-radius:4px;}
   .axero-widget-stacked-small-image ul li .z-info{margin-left:115px;}
   .axero-widget-stacked-small-image ul li .z-info h4{font-size: inherit;margin: -3px 0 0;}
   .axero-widget-stacked-small-image ul li .z-info h4 a{color:inherit;}
   .axero-widget-stacked-small-image ul li .z-info div{margin: 0;opacity: 0.7;font-size: 12.3167px;}
   .axero-widget-stacked-small-image ul li .z-info div a{color:inherit;}

3. Click Save CSS Overrides.

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. This template is best used in smaller columns - between 4 and 6.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure the widget properties. This template is best used to display content with featured images, such as articles and blogs.
8. Click Template.
9. Select the Stacked List Small Image template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.