{% extends "layout.html" %}
{% block body %}
  <h1>{{ this.title }}</h1>
  {{ this.body }}
  {% for img in this.attachments.images %}
    {# use half of test.jpg's dimensions (384 x 512) #}
    {% set tw = img.thumbnail(192) %}
    <img src="{{ tw|url }}" width="{{ tw.width }}" height="{{ tw.height }}">

    {% set th = img.thumbnail(height=256) %}
    <img src="{{ th|url }}" width="{{ th.width }}" height="{{ th.height }}">

    {# this should have exactly the same result as above #}
    {% set twh = img.thumbnail(width=256, height=256) %}
    <img src="{{ twh|url }}" width="{{ twh.width }}" height="{{ twh.height }}">

    {% set tq = img.thumbnail(192, 256, quality=20) %}
    <img src="{{ tq|url }}" width="{{ tq.width }}" height="{{ tq.height }}">

    {% set tc = img.thumbnail(300, 100, mode="crop") %}
    <img src="{{ tc|url }}" width="{{ tc.width }}" height="{{ tc.height }}">

    {% set ts = img.thumbnail(300, 100, mode="stretch") %}
    <img src="{{ ts|url }}" width="{{ ts.width }}" height="{{ ts.height }}">

    {# larger than original#}
    {% set t0 = img.thumbnail(400, 600, upscale=True) %}
    <img alt="upscaled" src="{{ t0|url }}" width="{{ t0.width }}" height="{{ t0.height }}">
    {% set t1 = img.thumbnail(400, 600, upscale=False) %}
    <img alt="original" src="{{ t1|url }}" width="{{ t1.width }}" height="{{ t1.height }}">
  {% endfor %}

  {# Not all subpages have a video clip, so we test for that here #}
  {% if this.attachments.videos.count() %}
    {% set video = this.attachments.videos|first %}
    <video src="{{ video|url }}" autoplay loop></video>

    {# We can only render this if ffmpeg/ffprobe is available #}
    {% if video.width is defined %}
      {% set td = video.frame().thumbnail() %}
      <img src="{{ td|url }}" width="{{ td.width }}" height="{{ td.height }}">

      {% set tv = video.frame(0).thumbnail(160) %}
      <img src="{{ tv|url }}" width="{{ tv.width }}" height="{{ tv.height }}">

      {% set sq = video.frame(2).thumbnail(160, 160, mode="crop") %}
      <img src="{{ sq|url }}" width="{{ sq.width }}" height="{{ sq.height }}">
    {% endif %}
  {% endif %}
{% endblock %}
