3-Column Directory
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
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>