Profile Header | Communifire Documentation

The profile header appears at the top of all user profile pages.

You can customize the header in the Control Panel.

1. Click the gear icon > Control Panel > People > User Profiles > Profile header.
2. Edit the template.
   • Use Insert token to add user profile fields. To add a system resource, start typing under Insert resource then click the resource. Tokens and resources are added where your blinking cursor is.
3. Click Save.

Example: Adding the Company field to the profile header template

1. In the editor, find the line {{field:Occupation}}{{#if ||field:Department||}} - {{{field:Department}}}{{/if}} .
2. After that line, hit enter and type <br> .
3. Keep the cursor after > (the right angled bracket).
4. In the Insert token menu, select Company. {{{field:Company}}} is added where the cursor is.
5. Click Save.

Result:

Template Syntax

See Page Builder Template Language Syntax for more details about template syntax.

Default Profile Header Template

Below is the default profile header template, for your reference.

<div class="row-fluid pr-cover-container">
    <div class="span12">
        <div class="pr-cover-section" style="background: url('{{field:Cover photo}}') no-repeat center center / cover ">
            <div class="pr-cover-section-content">
                <a href="{{{ChangePhotoURL}}}" id="coverPhoto" class="change-cover-photo" title="{{Resource.PeopleCropProfileStep1Text}}" data-placement="left"><i class="icon-camera"></i></a>
                <div class="pr-cover-profile-photo">
                    <img src="{{{ProfileImageURL}}}">
                    <a href="{{{ChangePhotoURL}}}" id="profilePhoto" class="change-profile-photo" title="{{Resource.PeopleCropProfileStep1Text}}" data-placement="right"><i class="icon-camera"></i></a>
                </div>
                <div class="pr-cover-user-info">
                    <span class=" field-people-display-name">{{{UserInfoDisplayName}}}</span>
                    <div class="pr-cover-user-info-title">
                        {{field:Occupation}}{{#if ||field:Department||}} - {{{field:Department}}}{{/if}}
                    </div>
                </div>
            </div>
        </div>
        <div class="pr-cover-section-options">
            <div class="pr-cover-user-actions">
                <a href="https://teams.microsoft.com/l/chat/0/0?users={{Email}}" target="_blank" class="btn axero-connectInTeams hide"><i class="msTeamsIcon"></i> <span class="btn-text">{{Resource.ConnectInTeamsText}}</span></a>
				<a href="#recognize" id="HeaderRecognize" class="btn hide"><i class="icon-trophy"></i> {{Resource.RecognizeBtnText}}</a>
                <a href="#" class="btn axero-add-connection hide"><i class="icon-plus-sign"></i> <span class="btn-text">{{Resource.GlobalConnectText}}</span></a>
                <a href="{{SiteURL}}/chat/user/{{UserID}}" target="_blank" class="btn axero-send-message hide"><i class="icon-comment"></i> <span class="btn-text">{{Resource.GlobalForwardMessageText}}</span></a>
                {{#if InOrgChart}}<a href="{{SiteURL}}/people/{{{UserName}}}/organizational-chart" class="btn "><i class="icon-sitemap"></i> <span class="btn-text">{{Resource.OrgChartText}}</span></a>{{/if}}
                <div class="btn-group pr-cover-settings hide">
                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="icon-cog"></i> <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#" class="axero-bookmark-content"><span class="icon-bookmark-empty"></span> {{Resource.BookmarkText}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('#coverPhoto').tooltip();
        $('#profilePhoto').tooltip();
    });
</script>