{% macro names(raw) %}
  {%- for part in raw.split(';') %}{% set p = part.strip() %}
    {%- if '<' in p %}<a href="{{ p.split('<')[1]|replace('>','')|trim }}" rel="noopener">{{ p.split('<')[0]|trim }}</a>
    {%- else %}{{ p }}{% endif %}{% if not loop.last %}, {% endif %}
  {%- endfor %}
{%- endmacro %}

{# The 2014 site ran the credits inline under the title: "with X for Y". #}
{% macro credits(a) %}
  {%- for key, label in [('with','with'), ('for','for'), ('hiredby','hired by'), ('photosby','photos by')] %}
    {%- if a.metadata.get(key) %}<span class="rel">{{ label }}</span> {{ names(a.metadata.get(key)) }} {% endif %}
  {%- endfor %}
{%- endmacro %}

{% macro tile(a, SITEURL) %}
{% set th = a.metadata.get('thumb') if not a.metadata.get('thumb_missing') else none %}
<a class="art {{ a.metadata.get('tilesize', 'sm') }}" href="{{ SITEURL }}/{{ a.url }}">
  {# the original showed animated static (void.gif) until jquery.lazyload
     swapped in data-original. Same effect, IntersectionObserver instead. #}
  {# --seed desynchronises the static: derived from the slug so it is stable
     across builds rather than reshuffling every time. #}
  {% set seed = (a.slug|length * 7 + a.title|length * 13 + a.date.month * 3) % 12 %}
  {% if th %}<span class="art-preview lazy" style="--seed:{{ seed }}" data-src="{{ SITEURL }}{{ th }}"></span>
  {% else %}<span class="art-preview empty" style="--seed:{{ seed }}"></span>{% endif %}
  <div class="art-title">{{ a.title }}</div>
  <div class="art-date">{{ a.date.strftime('%b %Y') }}</div>
</a>
{% endmacro %}