Individual Photo Directory
Imports: 7

This report generates compact photo directories with individual photos and custom listing preferences for member contact info. It can also display asterisks beside non-members. It requires several of custom fields, which are described in the notes at the top of the code.

Preview

Report Preview


<!--

This photo directory report assumes several custom fields are configured

- primary_contact.custom_tabs.communication_preferences.listed_address
-- Check-boxes with three options: "Home", "Work", "Other"
-- This controls which addresses are listed for the household. Mailing
-- addresses are only checked for the primary contact.

- person.custom_tabs.communication_preferences.listed_phone
-- Check-boxes with three options: "Home", "Mobile", "Work"
-- This controls which phone numbers are listed for each adult. Home phone
-- numbers are only checked for the primary contact.

- person.custom_tabs.communication_preferences.listed_email
-- Check-boxes with two options: "Home", "Work"
-- This controls which emails are listed for each adult.

- person.custom_tabs.communication_preferences.directory_inclusion
-- Dropdown with single option: "Force Exclude". (You may also add a
-- "Force Include" option for use in list creation.) This will prevent
-- individuals from showing up in the directory, even if their household
-- appears on your list.

This report works best with be two adults per household. Adult children should
be accounted for, but the report has not been well tested in these scenarios.
Contact info is never listed for children. (If you want this listed, you can
add the appropraite code under the children.)

This report can also add asterisks based on membership status. You can
disable this below if you do not want any asterisks.
{% assign showAsterisks = false %}

Which membership types should be printed without asterisks? List membership
types, separated by commas.

{% capture membershipTypes -%}
Member,Active Participant
{%- endcapture %}
{% assign membershipTypes = membershipTypes | split: ',' %}

-->




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700&display=swap" rel="stylesheet">
  <style>
    html, * {font-family: "Open Sans", sans-serif; line-height:1.4em;}
    @page {margin: .5in 0;}   /*-- PDF margin reset --*/
    body {margin: 0;}
    
    /*-- Fonts --*/
    .household-name {font-size: 12pt; font-weight:bold;}
    ul {font-size: 10pt;}
    li.household-name {font-weight: bold;}
    .adults .name {font-size: 11pt; font-weight: bold;}
    .children .name {font-size: 10pt; font-weight: bold;}
    
    /*-- Spacing --*/
    ul {list-style-type: none; display:inline-block; vertical-align:middle; margin:0; padding:0;}
    
    .household-item  {display: block; margin-bottom: .5em; padding-bottom: .5em; page-break-inside: avoid; border-bottom: none;}
    .household-header {display: inline-block; vertical-align: top; width: 215px; margin-bottom: .5em; padding-right: .5em;}
    .adults .entry {display: inline-block; vertical-align: top; width: 215px; padding-right: .5em; padding-bottom: .25em;}
    .adults .entry ul {width: 140px;}
    .adults .avatar {display:inline-block; vertical-align: top; margin-right: .5em; width: 60px; height: 60px; border-radius: 20%;}

    .children .entry {display: inline-block; padding-right: .5em;}
    .children .entry ul {vertical-align: middle; max-width: 100px;}
    .children .avatar {display:inline-block; vertical-align: middle; margin: .25em .5em .25em .25em; width: 40px; height: 40px; border-radius: 50%;}
    div.children {padding-left: .25em; border-radius: 15pt; border-bottom: 3px solid #EEE; background: linear-gradient(to right, rgb(243, 243, 243) 0%, rgba(255,255,255) 100%);}
    
    li.email {overflow-wrap: break-word; word-wrap: break-word;} /*-- allows long emails to break into multiple lines --*/

    @media screen {
      /*----- The wrapper class controls the preview frame in the HTML generated report. ----*/
      /*----- Portrait view = max-width: 720px ----*/
      .wrapper 	{padding: 1.5em; border: 1px solid rgb(204,204,204); margin:1.5em auto; max-width:766px;}
    }
    
    @media print {
      .no-print {display: none;}
      body {margin: .5in;} /*----- Adjust this to change the page margins for printing ----*/
    }
  </style>
</head>

<body>
  
  <div class="wrapper">
    <div class="main">

      {% for household in households %}
        {% if household.people.size > 0 %}
          <div class="household-item">
            <div class="adults">
              <div class="household-header">
                <ul>
                  <li class="household-name">
                    {% if household.people.size > 1 %}
                      {{ household.name }}
                      {% else %}
                        {{ household.primary_contact.name }}
                    {% endif %}
                  </li>
                  {% assign includetest = household.primary_contact.custom_tabs.communication_preferences.listed_address | join: ', ' %}
                  {% for address in household.primary_contact.addresses %}
                    {% if includetest contains address.location %}
                      <li class="household-address">
                        {{ address.street_line_1 }}{% if address.street_line2 %}<br />
                        {{ address.street_line_2 }}{% endif %}<br />
                        {{ address.city }}, {{ address.state }} {{ address.zip | slice: 0, 10 }}
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>

      <!----- Primary Contact ----->

              {% for person in household.adults %}
                {% if person.active %}
                  {% if household.primary_contact.id == person.id %}
                    <div class="entry primary-contact">
                      {% assign imgurl = person.photo_url | split: '?' %}
                      <div class="avatar" style="background: #ddd url({{- imgurl[0] -}}?g=240x240) no-repeat top/cover"></div>
                      <ul>

                        <li class="name">
                          {% if person.name_prefix.size > 0 %}{{ person.name_prefix}} {% endif %}
                          {{ person.first_name }} {{ person.last_name }}
                          {%- if person.name_suffix.size > 0 %} {{ person.name_suffix}}{% endif %}
                          {%- if showAsterisks %}
                            {%- unless membershipTypes contains person.membership %}*{% endunless %}
                          {% endif %}
                        </li>

                        {% assign includetest = person.custom_tabs.communication_preferences.listed_phone | join: ', ' %}
                        {% for phone_number in person.phone_numbers %}
                          {% if includetest contains phone_number.location %}
                            <li class="phone">
                              {{ phone_number.location | slice: 0, 1 }}: {{ phone_number.number }}
                            </li>
                          {% endif %}
                        {% endfor %}

                        {% assign includetest = person.custom_tabs.communication_preferences.listed_email | join: ', ' %}
                        {% for email in person.emails %}
                          {% if includetest contains email.location %}
                            <li class="email">
                              {{ email.address }}
                            </li>
                          {% endif %}
                        {% endfor %}

                      </ul>

                    </div>
                  {% endif %}
                {% endif %}
              {% endfor %}

      <!----- Other Adult(s) ----->

              {% for person in household.adults %}
                {% if person.active and person.custom_tabs.communication_preferences.directory_inclusion.value != 'Force Exclude' %}
                  {% unless household.primary_contact.id == person.id %}

                    <div class="entry other-adult">
                      {% assign imgurl = person.photo_url | split: '?' %}
                      <div class="avatar" style="background: #ddd url({{- imgurl[0] -}}?g=240x240) no-repeat top/cover"></div>
                      <ul>

                        <li class="name">
                          {% if person.name_prefix.size > 0 %}{{ person.name_prefix}} {% endif %}
                          {{ person.first_name }} {{ person.last_name }}
                          {%- if person.name_suffix.size > 0 %} {{ person.name_suffix}}{% endif %}
                          {%- if showAsterisks %}
                            {%- unless membershipTypes contains person.membership %}*{% endunless %}
                          {% endif %}
                        </li>

                        {% assign includetest = person.custom_tabs.communication_preferences.listed_phone | join: ', ' %}
                        {% for phone_number in person.phone_numbers %}
                          {% if includetest contains phone_number.location %}
                            <li class="phone">
                              {{ phone_number.location | slice: 0, 1 }}: {{ phone_number.number }}
                            </li>
                          {% endif %}
                        {% endfor %}

                        {% assign includetest = person.custom_tabs.communication_preferences.listed_email | join: ', ' %}
                        {% for email in person.emails %}
                          {% if includetest contains email.location %}
                            <li class="email">
                              {{ email.address }}
                            </li>
                          {% endif %}
                        {% endfor %}

                      </ul>

                    </div>
                  {% endunless %}
                {% endif %}
              {% endfor %}

            </div>

      <!----- Children ----->

            {% if household.children.size > 0 %}
              <div class="children">
              {% for person in household.children %}
                {% if person.active and person.custom_tabs.communication_preferences.directory_inclusion.value != 'Force Exclude' %}
                  <div class="entry child">
                    {% assign imgurl = person.photo_url | split: '?' %}
                    <div class="avatar" style="background: #ddd url({{- imgurl[0] -}}?g=240x240) no-repeat top/cover"></div>
                      <ul>
                        <li class="name">
                          {{ person.first_name }}<br />{{ person.last_name }}
                          {%- if person.name_suffix.size > 0 %} {{ person.name_suffix }}{% endif %}
                          {%- if showAsterisks %}
                            {%- unless membershipTypes contains person.membership %}*{% endunless %}
                          {% endif %}
                        </li>
                      </ul>
                  </div>
                {% endif %}
              {% endfor %}
              </div>
            {% endif %}
            
          </div>
        {% endif %}
      {% endfor %}
 
    </div>
  </div>

</body>
</html>