Event Stacked List Template | Axero Documentation

The Event Stacked List template displays events with the featured image on the left and information on the right. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Filter by the event content type
4. Select the Event Stacked List template in the Template tab

Default List View Configuration

The DefaultEventListType system property controls the default list view for event lists. To change it, go to Control Panel > System > System Properties and set your preferred value: 1 = Upcoming, 2 = Newest, 3 = Most Viewed, 4 = Highest Rated, 5 = Most Commented.

Template HTML

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">
        <ul class="thumbnails ax-magazine-one-stack"> 
        
            {{#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">
                        <span id="event-date-{{ContentID}}">{{EventWhen}}</span>
                        {{#if ../CommentsEnabled}}&#8901;&nbsp;<i class="icon-comment"></i> {{CommentCount}}{{/if}}</p>
                        <p class="description">{{{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>