People Grid widget | Community Development | Sandbox ConnAct

You can create a people grid template that will look something like this:

Template

Follow the steps below to create the People Grid template.

1.  Add Page Builder Template 

2. Enter People Grid as the template name

3. Select UserList as the Widget Type

4. Paste the following code into the editor:

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

        <ul class="thumbnails people-grid">
        {{#each Contents}}
        <li class="span4">
            <a href="{{ProfileURL}}" title="{{{UserInfoDisplayName}}}" class="thumbnail"><img alt="{{{UserInfoDisplayName}}}" src="{{AvatarImageURL}}" /></a>
        </li>                                                     
        {{/each}}
        </ul>

    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        
    </div>
    {{/if}}
</div>

5. Save the template

CSS Overrides

1. In  CSS Overrides , paste the following code:

/* People Grid Example */
.people-grid {padding: 0 15px;margin: 0;}
.people-grid li{margin-bottom: 15px;}
.people-grid > li:nth-child(3n+1) {margin-left: 0;}
.people-grid li a{padding: 0;border: 1px solid #efefef;border-radius: 0;box-shadow: 0 0 0 transparent;}
.people-grid li a.thumbnail:hover, 
.people-grid li a.thumbnail:focus{box-shadow: 0 0 0 transparent;border-color: #efefef;}
.people-grid li a img{width: 100%;}

2. Click Save CSS Overrides

You can now select the People Grid template in the People List widget in Page Builder.