Default Picture Directory Template

The Default Template that gets created when you first create your Online Picture Directory will display the person’s picture or a gender-appropriate icon if there is no photo, next is a column for the name and address, the next column contains the phone numbers and email address, and the last column contains the birthday (month and day).

The Template will be located in Special Content > Text Content and is named PictureDirectoryTemplate.

The template uses HandleBars to render the content using the SQL described here: Default SQL for Picture Directory.

If your church does not want to include all of this information, you an modify the template that gets created in your database.

Below is the default content of that template

<!--default.v1   IMPORTANT! delete this line if you want to customize, otherwise your changes will be overwritten-->
<div id="results">
  <style>
    .profile-portrait {
      height: 75px;
      width: 75px;
      display: inline-block;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .profile-photo {
      display: inline-block;
      margin-bottom: 10px;
      border-radius: 999999px;
      background-color: #fff;
      border: 1px solid #e6e6e6;
      padding-top: 5px;
      padding-left: 5px;
      padding-right: 5px;
    }
  </style>
  {{{PagerTop}}}
  <div class="table-responsive">
    <table class="table table-striped" style="width: auto; margin-left: auto; margin-right: auto">
      <thead>
        <tr>
          <th></th>
          <th>{{{SortName}}}</th>
          <th></th>
          <th>{{{SortBirthday}}}</th>
        </tr>
      </thead>
      <tbody>
        {{#each Entry}}
        <tr>
          <th>
            <div class="profile-photo">
              <a class="image-popup-vertical-fit" href="{{MediumUrl}}" title="{{Name}}">
                <div class="profile-portrait img-circle"
                     style="background-image: url({{SmallUrl}}); background-position: {{ImagePos}}">
                </div>
              </a>
            </div>
          </th>
          <td>
            {{#if ../HasAccess}}
              <b><a href="/Person2/{{PeopleId}}" target="Person">{{Name}}</a></b>
            {{else}}
              {{Name}}
            {{/if}}
            {{#if Address}}<div>{{Address}}</div>{{/if}}
            {{#if Address2}}<div>{{Address2}}</div>{{/if}}
            {{#if City}}<div>{{CityStateZip}}</div>{{/if}}
          </td>
          <td>
            {{#if PhonesOk}}
              {{#if Home}}<div>{{FmtPhone Home 'H'}}</div>{{/if}}
              {{#if Cell}}<div>{{FmtPhone Cell 'C'}}</div>{{/if}}
            {{/if}}
            {{#if Email}}<div><a href='mailto:{{Email}}'>{{Email}}</a></div>{{/if}}
            {{#if Email2}}<div><a href='mailto:{{Email2}}'>{{Email2}}</a></div>{{/if}}
          </td>
          <td>{{Birthday}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </div>
  {{{PagerBottom}}}
  {{{PagerHidden}}}
</div>