directory_recipe.twig

<style>
	.directory-entry {
		margin: 15px 30px 15px 0;
		width: 300px;
		max-width: 100%;
		display: inline-block;
		vertical-align: top;
	}
</style>

{% set lastCategory = "" %}

{% for staff in su.collection( "directory" ).sort( "category" ).sort( "name.last" ) %}
	{% if staff.category != lastCategory %}
		<h3>{{ staff.category }}</h3>
		{% set lastCategory = staff.category %}
	{% endif %}
	<div class="directory-entry">
		<img src="{{ staff.image.fill( 269,180 ) }}" width="100%"/>
		<h4>{{ staff.name.first }} {{ staff.name.last }}</h4>
		<div>{{ staff.title }}</div>
		<div><a href="tel:{{ staff.phone }}">{{ staff.phone }}</a></div>
		<div><a href="mailto:{{ staff.email }}">{{ staff.email }}</a></div>
		<div>{{ staff.description }}</div>
	</div>
{% endfor %}