3-Column Directory
Imports: 23

Print-ready photo directory in 3 columns. Members are sorted by household. This report can be created as a .pdf directly from a list in People. As is, this report requires date_joined and date_departed custom fields, but you should be able to remove all references to those fields without ill effects. New custom fields should be easy to add as a new <div> inside of the <li class="member">, following the pattern illustrated with date_joined.

Preview

Report Preview


 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
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      html, * {
        font-family: "Arial Narrow", "Arial", monospace;
        line-height: 1.4em;
        margin: 0;
        padding: 0;
      }
      
      .directory {
        font-size: 8pt;
      }
      
      .member {
        float: left;
        display: block;
        width: 33%;
        break-inside: avoid;
        height: 160px;
      }
      
      .member .member-photo {
        float: left;
        width: 100px;
        margin-right: 0.5rem;
      }
      
      .member .member-details {
        overflow: hidden;
      }
      
      .member .member-name {
        font-size: 9pt;
      }
      
      @page {
        size: US-Letter;
        margin-top: 0.5in;
        margin-bottom: 0.5in;
        margin-left: 0.25in;
        margin-right: 0.25in;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
	      <ul class="directory">
	        {% assign sorted_households = households %}
	
	        {% for household in sorted_households %}
	          {% if household.active_adults.size > 0 %}
	            {% for member in household.adults %}
	              {% assign member_tab = member.tabs[0] %}
	
	              {% capture date_joined_str %}{{ member_tab.date_joined }}{% endcapture %}
	              {% assign date_joined_size = date_joined_str|size %}

	              {% capture date_departed_str %}{{ member_tab.date_departed }}{% endcapture %}
	              {% assign date_departed_size = date_departed_str|size %}

	              <!-- active members have joined but not departed -->
	              {% if date_joined_size != 0 and date_departed_size == 0 %}
	                <li class="member">
	                  <div class="member-photo">
	                    <img class="member-photo"
	                      src={{ member.photo_url }} />
	                  </div>
	                  <div class="member-details">
	                    <div class="member-name">
	                      <b>{{ member.last_name | upcase }}, {{ member.first_name | upcase }}</b>
	                    </div>
	                    <div class="member-address">
                               {{ member.primary_address.postal_address }}
	                    </div>
	                    <div class="member-email">
	                      {{ member.primary_email }}
	                    </div>
	                    <div class="member-phone">
	                      {{ member.primary_phone_number }}
	                    </div>
	                    <div class="member-date-joined">
	                      {% assign date_components = member_tab.date_joined | split: '/' %}
	                      DJ: {{ date_components[0] }}/{{ date_components[2] }}
	                    </div>
	                    <div class="member-children">
                              {{ household.children | map: "first_name" | join: ", " }}
	                    </div>
	                  </div>
	                </li>
	              {% endif %}
	            {% endfor %}
	          {% endif %}
	        {% endfor %}
	      </ul>
    </div>
  </body>
</html>