Individual Photo Directory
Chef Devin Wipperman
Imports: 83

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.

Import to Planning Center
Preview

Report Preview
Copy Code Import to Planning Center 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!--

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>

Chef Devin Wipperman May 2025