Re-size de imágenes en Wagtail

En HTML podemos mostrar varios tamaños de imagen diferentes según el tamaño de la pantalla, permitiendo así, que nuestra web sea responsive.

El código sería el siguiente:

<picture>
 <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
 <source media="(min-width:465px)" srcset="img_white_flower.jpg">
 <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Dónde a través del tag source establecemos las diferentes condiciones del tamaño de la pantalla, y según ése tamaño, se muestra una imagen u otra. En Wagtail, queríamos replicar este mismo comportamiento, y consultando la documentación, nos ofrecen esta solución:

<picture>
 {% image page.photo width-800 as wide_photo %}
 <source srcset="{{ wide_photo.url }}" media="(min-width: 800px)">
 {% image page.photo width-400 %}
</picture>

Probando el ejemplo de la documentación, vimos que no estaba funcionando, no había responsive para las imágenes. Para comprobar porqué no estaba funcionando, decidimos comparar los HTML generados para ambos ejemplos, para ver si ahí había algo sospechoso que nos hiciese ver el error.

Y efectivamente, comprobando los HTML generados para el ejemplo HTML y para el ejemplo de la documentación de Wagtail:

Ejemplo HTML: <img [...] src="original.jpg">

Ejemplo Wagtail: <img [...] src="original.jpg" width="480" height="320">

A simple vista, ya podemos observar la diferencia, el código HTML generado a través de los Django template tags tiene los atributos width y height con valores predefinidos; y al tener ya estos valores, hace que no funcione el re-size de las imágenes a través del source especificado. Finalmente, la solución propuesta para el re-size de imágenes en Wagtail es la siguiente:

{% image card_item.img fill-640x450-c50 as icon %}
{% image card_item.img fill-220x150-c50 as iconmobile %}
<picture>
 <source media="(min-width:640px)" srcset="{{ icon.url }}">
 <img loading="lazy" class="card-img" src="{{ iconmobile.url }}" alt="{{card_item.img.title}}">
</picture>

Declarando las dos imágenes diferentes antes del tag <picture>, para luego, cargar una imagen u otra dependiendo de la condición del source. Cómo se puede observar, en esta solución, estamos cargando las imágenes con el tag HTML img directamente, en lugar del template tag image de Django.

Hemos abierto un PR en el repositorio de Wagtail avisando que el ejemplo de la documentación no funcionaba y proponiendo la solución anterior. De momento está en revisión 😉