test.j2

{% extends "base.html" %}

{% load wagtailcore_tags %}
{% load wagtailimages_tags %}
{% load wagtailpictureproposal_tags %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}
    <style>
      img {
        display: block;
        max-width: 100%;
        height: auto;
      }
    </style>
    <h1>{{ page.title }}</h1>

    <h2>image</h2>

    {% image page.test_image width-1024 loading="lazy" %}

    {% webp_picture_wip page.test_image width-{320,480,640,768,1024} q-60 loading="lazy" sizes="100vw" %}

    {# {% comment %} #}
    <h2>webp_picture_wip</h2>

    <h3>Brace expansion for srcset attribute.</h3>
    {% webp_picture_wip page.test_image width-{500,600,800} loading="lazy" alt="original" sizes="(max-width: 600px) 480px, 800px" %}

    <h2>img_srcset_wip</h2>

    <h3>Brace expansion for srcset attribute.</h3>
    {% img_srcset_wip page.test_image width-{500,600,800} loading="lazy" alt="original" sizes="(max-width: 600px) 480px, 800px" %}

    <h3>Named renditions.</h3>
    {% img_srcset_wip page.test_image potato-9000 loading="lazy" %}

    <h3>Renditions from variable.</h3>
    {% img_srcset_wip page.test_image test_image_renditions loading="lazy" %}

    <h3>Brace expansion with `as output_var` syntax to retrieve list.</h3>
    {% img_srcset_wip page.test_image width-{200,400,600} as srcset %}

    <style>
      #test-bg-image {
        min-height: 300px;
        background-repeat: no-repeat;
        background: url('{{ srcset.0.url }}');
      }
      @media screen and (min-width: 601px) {
        #test-bg-image {
          background: url('{{ srcset.1.url }}');
        }
      }
      @media screen and (min-width: 801px) {
        #test-bg-image {
          background: url('{{ srcset.2.url }}');
        }
      }
    </style>
    <div id="test-bg-image">
      <p>test background image</p>
    </div>

    {{ page.body|richtext }}

    {% comment %}

    <p>1</p>
    {% image page.test_image width-800 alt="original" loading="lazy" %}
    <p>2</p>
    {% image page.test_image width-800 format-webp-lossless alt="lossless" loading="lazy" %}
    <p>3</p>
    {% image page.test_image width-800 format-webp alt="lossy default" loading="lazy" %}
    <p>4</p>
    {% image page.test_image width-800 format-webp webpquality-70 alt="lossy 70" loading="lazy" %}

    <h2>Picture</h2>

    <h3>Vanilla</h3>

    <picture>
      {% image page.test_image width-782 format-webp as webp_image %}
      <source srcset="{{ webp_image.url }}" type="image/webp">
      {% image page.test_image width-783 alt="original" %}
    </picture>

    <h3>Template partial</h3>

    {# resize_rule does nothing, it’s just there as an illustration #}
    {% include "webp_picture.html" with img=page.test_image alt="original" resize_rule="width-782" %}

    <h3>Template tag</h3>

    {# {% picture_webp page.test_image width-783@768w alt="original" %} #}
    {% webp_picture page.test_image width-784 alt="original" %}


    <p>Proposed APIs:</p>

    {# {% webp_picture page.test_image width-800 width-400 sizes="(max-width: 600px) 480px, 800px" alt="original" %} #}
    {# {% webp_picture page.test_image width-{400,800} sizes="(max-width: 600px) 480px, 800px" alt="original" %} #}
    {# {% webp_picture page.test_image width-1-400 width-1-800 sizes="(max-width: 600px) 480px, 800px" alt="original" %} #}

    <p>Output:</p>

    <picture>
      {% image page.test_image width-800 format-webp as image_desktop_webp %}
      {% image page.test_image width-400 format-webp as image_mobile_webp %}
      <source
        srcset="{{ image_desktop_webp.url }} {{ image_desktop_webp.width }}w, {{ image_mobile_webp.url}} {{ image_mobile_webp.width }}w"
        sizes="(max-width: 600px) 480px, 800px"
        type="image/webp"
      >
      {% image page.test_image width-800 as image_desktop_fallback %}
      {% image page.test_image width-400 as image_mobile_fallback %}
      <img
        srcset="{{ image_desktop_fallback.url }} {{ image_desktop_fallback.width }}w, {{ image_mobile_fallback.url}} {{ image_mobile_fallback.width }}w"
        sizes="(max-width: 600px) 480px, 800px"
        src="{{ image_desktop_fallback.url }}" alt="original"
      >
    </picture>

    <h3>Template partial</h3>

    {# resize_rule does nothing, it’s just there as an illustration #}
    {% include "responsive_picture.html" with img=page.test_image alt="original" sizes="(max-width: 768px) 688px, 924px" resize_rule="width-792 width-392" %}
    {% endcomment %}
{% endblock %}