<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="/static/card.css">
  <style>{% for name in members %}
  #{{ members[name].photo }} .photo { background-image: url("{{ members[name].photo_url }}") }{% endfor %}
  </style>
</head>
<body>
  {% for row in members | batch(4) %}
  <div class="page">
      {% for name in row %}
    <div class="card" id="{{ members[name].photo }}">
      <h2>{{ name }}</h2>
      <div class="photo"></div>
      <ul>
        <li class="title">{{ members[name].role }}</li>
      </ul>
    </div>
    {% endfor %}
  </div>
  {% endfor %}
</body>
</html>

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="/static/card.css">
  <style>{% for name in members %}
  #{{ members[name].photo }} .photo { background-image: url("{{ members[name].photo_url if members[name].photo_url else ('/photo/' + members[name].photo) }}"); } {% endfor %}
  </style>
</head>
<body>
  {% for row in members | batch(4) %}
  <div class="page">
      {% for name in row %}
    <div class="card" id="{{ members[name].photo }}">
      <h2>{{ name }}</h2>
      <div class="photo"></div>
      <ul>
        <li class="title">{{ members[name].role }}</li>
      </ul>
    </div>
    {% endfor %}
  </div>
  {% endfor %}
</body>
</html>

Use CSS for card background images
Use CSS for card background images
