ppl.html

        <div class="card-columns {% if include.size == "big" %}big{% elsif include.role == "alumni" %}alumni{% endif %}">
        {% for person in site.data.people %}

            {% if include.role == "all" %} {% assign role =  person.role %}
            {% else %}                     {% assign role = include.role %}
            {% endif %}

            {% if role == person.role %}
            {% if role == "alumni" %}
            <li>{% if person.url %}<a href="{{ person.url }}" target="_blank">{{ person.name }}</a>{% else %}{{ person.name }}{% endif %}{% if person.graduated %}, graduated in {{ person.graduated }}{% endif %}{% if person.nowat %}, now at {{ person.nowat }}{% endif %}.</li>
            {% elsif include.size == "big" %}
            <div class="card mb-3">
              <div class="row no-gutters">
                <div class="col-sm-4 ml-auto">
                    <img src="{% if person.pic %}/img/people/{{ person.pic }}{% else %}{{ site.logopng }}{% endif %}" class="img-fluid" style="width: 100%;" align="middle">
                </div>
                <div class="col-sm-8">
                  <div class="card-body">
                    <h2 class="card-title">{{ person.name }}</h2>
                    {% if person.office %}<p class="card-text"><i class="fa fa-fw fa-briefcase"></i> {{ person.office }}</p>{% endif %}
                    {% if person.phone  %}<p class="card-text"><i class="fa fa-fw fa-phone"    ></i> {{ person.phone  }}</p>{% endif %}
                    {% if person.email  %}<p class="card-text"><a href="mailto:{{ person.email }}"        class="card-link"><i class="fa fa-fw fa-envelope"></i> {{ person.email }}</a></p>{% endif %}
                    {% if person.url    %}<p class="card-text"><a href="{{ person.url }}" target="_blank" class="card-link"><i class="fa fa-fw fa-home"    ></i> {{ person.url   }}</a></p>{% endif %}
                  </div>
                </div>
              </div>
            </div>
            {% else %}
            <div class="card mb-3 mx-1">
              <img class="card-img" src="{% if person.pic %}/img/people/{{ person.pic }}{% else %}{{ site.logopng }}{% endif %}" class="img-fluid" style="width: 100%;" align="middle" alt="{{ person.pic }}">
              <div class="card-img-overlay d-flex flex-column justify-content-end">
                <h3 class="card-title">{{ person.name }}</h3>
                {% if person.office %}<p class="card-text"><i class="fa fa-fw fa-briefcase"></i> {{ person.office }}</p>{% endif %}
                {% if person.phone  %}<p class="card-text"><i class="fa fa-fw fa-phone"    ></i> {{ person.phone  }}</p>{% endif %}
                {% if person.email  %}<p class="card-text"><a href="mailto:{{ person.email }}"        class="card-link" style="word-break: break-all;"><i class="fa fa-fw fa-envelope"></i> {{ person.email }}</a></p>{% endif %}
                {% if person.url    %}<p class="card-text"><a href="{{ person.url }}" target="_blank" class="card-link" style="word-break: break-all;"><i class="fa fa-fw fa-home"     ></i> {{ person.url  }}</a></p>{% endif %}
              </div>
            </div>
            {% endif %}
            {% endif %}
        {% endfor %}
        </div>