Generate rich img tags without requiring a dedicated image template

[jbmorley]

The current implementation requires sites to provide an image.html template file which is then responsible for generating an img tag that includes the image dimensions, scales, etc.

It would be great if there were a default implementation which generates a rich img tag with the width, height, alt text, and different scales.

[jbmorley]

The current template for jbmorley.co.uk looks like this:

{% if image.scale %}
{% set width = image.image.width / image.scale %}
{% set height = image.image.height / image.scale %}
{% else %}
{% set width = image.image.width %}
{% set height = image.image.height %}
{% endif %}

{% if image.projection == "equirectangular" %}
    {% with path = image.image.url %}
    {% include "panorama_content.html" %}
    {% endwith %}
{% else %}
    <div class="photo-container">
    <img class="photo-img transition loading"
         {% if image.alt %}
         alt="{{ image.alt }}"
         {% elif image.title %}
         alt="{{ image.title }}"
         {% endif %}
         {% if image.title %}
         title="{{ image.title }}"
         {% elif image.alt %}
         title="{{ image.alt }}"
         {% endif %}
         src="{{ image.image.url }}"
         width="{{ width }}"
         height="{{ height }}"
        />
    </div>
{% endif %}

Support for equirectangular images seems unnecessary (though it might be nice to automatically populate some additional tag attributes with the image metadata), but it would be nice to be able to generate something like this automatically.

[jbmorley]

Since writing this, I've also added support for dark-mode images as a separate template on jbmorley.co.uk (see adaptive_image.html) which it would be nice to include and document.