Custom Featured People Template | Communifire Documentation

Use the Custom Featured People template to display users who don't have a shared attribute, such as profile fields or space membership. Highlight cross-functional teams, recognize employees of the month, or feature department heads.

Add Template

1. Click the gear icon > Control Panel > System > Page Builder Templates.
2. Click Add a new template.
3. In Template Name, enter Custom Featured People.
4. In Widget Type, select Content List.
5. In Widget Sub Type, select Content List.
6. In the editor, paste the following code.

   <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">
           <div class="list">
           <ul> 
               {{#each Contents}}
               <li>
                   <div class="axero-section-list-avatar">
                   <a href="{{ContentURL}}" title="{{{Title}}}"><img alt="{{{Title}}}" src="{{ContentImageURL}}" /></a>
               </div>
               <div class="axero-section-list-content">
                   <div class="axero-section-list-content-title">
                       <a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a>
                   </div>
                   <div class="axero-section-list-content-date" id="wgt-specific-ppl-{{ContentID}}" style="user-select: auto;">
                       <!--Occupation-->
                    </div>
               </div>
               </li>
               {{/each}}
           </ul>
           </div>
       </div>
       {{#if ShowWidgetFooter}}
       <div class="axero-widget-footer">
           {{{FooterHTML}}}
       </div>
       {{/if}}
   </div>
   {{#each Contents}}
   <script>
       $.ajax({
           type: "GET",
           url: "/api/content/" + {{ContentID}} + "?contentTypeID=15&fields=Occupation",
           contentType:"application/json; charset=utf-8",
           dataType: "JSON",
           success: function(response){
               var id = "wgt-specific-ppl-" + {{ContentID}};
               document.getElementById(id).innerHTML = response.ResponseData.Occupation;
           }
       });
   </script>
   {{/each}}
   

7. Click Save Template.

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 mid-sized columns - between 4 and 6.
5. On the Content List widget, click the gear icon > Edit properties.
6. In Content types, select User.
7. In Authors, start typing a name, and select the user from the suggestions. Fill the Authors field with all the users you want to display in the widget.
   
8. Set Total items to the number of users in the Authors field or a greater value.
9. Click Template.
10. Select the Custom Featured People template.
11. Click Save Widget.
12. Click Publish changes.
13. Click Go to page.

How to Customize the User Profile Fields in the Widget

You can edit the Page Builder template to customize which user profile fields appear in the widget. HTML and JavaScript knowledge is required.

1. Go to Control Panel > System > Page Builder Template.
2. In Widget Type, select Content List.
3. Click the Custom Featured People template.
4. In the editor, locate the following line. This line gets profile fields using the API.

   url: "/api/content/" + {{ContentID}} + "?contentTypeID=15&fields=Occupation"

5. In the fields parameter, enter a comma-separated list of profile field names. Example:

   url: "/api/content/" + {{ContentID}} + "?contentTypeID=15&fields=Occupation,Department,Phone"

6. Locate the following line. This line displays the profile fields in the widget.

   document.getElementById(id).innerHTML = response.ResponseData.Occupation;

7. Update the right hand side of the expression to change the profile fields in the widget and how they appear. Example:

   document.getElementById(id).innerHTML = `${response.ResponseData.Occupation} | ${response.ResponseData.Department} | ${response.ResponseData.Phone}`;

8. Click Save Template.

Example result: