Stacked List Small Image Template | Communifire Documentation

You can create a stacked list widget for small columns. It will look something like this:

How to Create

1. Go to Control Panel > System > 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. Enter GlobalByText in Resource Keys CSV.

6. Paste the following HTML in the editor.

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

7. Click Save Template.

CSS Overrides

1. Go to Control Panel > System > CSS Overrides .

2. Paste the following code.

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