staffer.html

<div class="staffer">
  {%- if page.photo -%}
  <img class="staffer-image" src="{{ site.baseurl }}{{ page.subpath }}{{ page.photo }}" alt="{{ page.name }} profile photo" width="{{ page.width }}" height="{{ page.height }}">
  {%- else -%}
  <img class="staffer-image" src="{{ site.baseurl }}{{ page.subpath }}default_photo.jpg" alt="{{ page.name }} profile photo" width="{{ page.width }}" height="{{ page.height }}">
  {%- endif -%}
  <div>
    <h3 class="staffer-name" id="{{ page.name | slugify }}">
      {%- if page.website -%}
      <a href="{{ page.website }}">{{ page.name }}</a>
      {%- else -%}
      {{ page.name }}
      {%- endif -%}
      {%- if page.pronouns -%}
      <span class="staffer-badge">{{ page.pronouns }}</span>
      {%- endif -%}
      {%- if page.access_email -%}
      <span class="staffer-badge">{{ site.course_email }}</span>
      {%- endif -%}
      {%- if page.access_dsp -%}
      <span class="staffer-badge">DSP</span>
      {%- endif -%}
    </h3>
    {%- if page.email -%}
    <p><a href="mailto:{{ page.email }}">{{ page.email }}</a></p>
    {%- endif -%}
    {%- if page.section -%}
    <p class="staffer-meta">Section: {{ page.section | markdownify | strip_html }}</p>
    {%- endif -%}
    {%- if page.office_hours -%}
    <p class="staffer-meta">Office Hours: {{ page.office_hours | markdownify | strip_html }}</p>
    {%- endif -%}
    {{ content }}
  </div>
</div>