People Directory Template | Communifire Documentation

The People Directory template displays people in a grid. The template is a built-in template and comes with your Communifire site.

How to Use the People Directory Template

To use the template in People Directory :

1. In Control Panel > People > User Profiles, edit the People Directory page.
2. On the People widget, click the gear icon > Edit Properties.
3. Click the Template tab.
4. Select the People Directory template.
5. Save the widget and page.

To use the template on any other page:

1. Go to Control Panel > System > Page Builder and add or edit a page.
2. Add a People widget to the page.
3. On the People widget, click the gear icon > Edit Properties.
4. Set the type to People Directory.
5. Click the Template tab.
6. Select the People Directory template.
7. Save the widget and page.

How to Customize the People Directory Template

Make the profile photos bigger

1. Go to Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Remove image crop for the People Directory template*/
   ul.axero-people-grid li .thumbnail .img-wrapper a.img-inner img:nth-child(2) {
       margin-top: 0;
   }
   ul.axero-people-grid li .thumbnail .img-wrapper {
       padding-top: 100%;
   }

3. Click Save CSS Overrides.

Once you save CSS overrides, profile photos in the People Directory template will appear bigger anywhere the template is used.

Template HTML

Below is the HTML of this template, for your reference.

<ul class="ax-content-list thumbnails axero-people-grid" infinite-scroll='loadMore()' data-widgetid='{{WidgetID}}'>
    {{#each Contents}}
    <li class="span4 axero-people-grid-item{{#if ConnectedToUser}} connected{{else}} not-connected{{/if}}" data-userid="{{User.UserID}}">
        <div class="thumbnail">
            <div class="img-wrapper">
                <a href="{{{User.ProfileURL}}}" title="{{{User.UserInfoDisplayName}}}" class="img-inner">
					{{#if RankName}}
                    <span class="profile-rank">
                        <img src="{{User.RankImageURL}}" alt="{{{User.RankName}}}">
                        <span class="axero-people-list-rank">{{{User.RankName}}}</span> 
                    </span>
					{{/if}}
                    <img src="{{field:Profile photo}}" alt="{{{User.UserInfoDisplayName}}}">
                </a>
            </div>
            <div class="profile-info">
                <div class="profile-name"><a class="axero-user-card-link" data-user="{{User.UserID}}" href="{{{User.ProfileURL}}}">{{{User.UserInfoDisplayName}}}</a></div>
                <div class="profile-title">{{{field:Occupation}}}</div>
                <div class="profile-company">{{{field:Company}}}</div>
                <div class="profile-location">{{{field:Location}}}</div>
            </div>
			{{#if user.CanChat}}
            <div class="profile-actions">
                <ul class="inline chat-status-container" data-userid='{{User.UserID}}'>
                    <li class="profile-user-online-status"><i title="{{{User.ChatStatusText}}}" class="icon-circle {{User.ChatStatusCSSClass}}"></i></li>
                    <li class="profile-actions-message"><a href="{{../SiteURL}}/chat/user/{{User.UserID}}" target="_blank" class="people-send-message"><i class="icon-comment"></i></a></li>
                </ul>
            </div>
			{{/if}}
        </div>
    </li>
    {{/each}}
</ul>
<span class="no-entries hide">{{Resources.GlobalNoMembersFoundText}}</span>