{% load sorl_thumbnail wagtailcore_tags ocyan_thumbnail %}


<a href="{{ self.category.get_absolute_url }}" class="cat-image{% if not self.category.image %} gd-secondary{% endif %}">
    <span>{{ self.category.name }}</span>
    {% if self.category.image %}
    {% widthratio self.category.image.width 2 1 as halfwidth %}
    {% thumbnail self.category.image self.category.image.width|lower upscale=False format="JPEG" as image %}
    {% thumbnail self.category.image halfwidth upscale=False format="JPEG" as image_small %}
    {% thumbnail self.category.image self.category.image.width|lower upscale=False format="WEBP" as image_webp %}
    {% thumbnail self.category.image halfwidth upscale=False format="WEBP" as image_webp_small %}
    <picture class="lazy">
        <data-src srcset="{{image_webp.url}} {{image_webp.width}}w, {{ image_webp_small.url}} {{ image_webp_small.width }}w" type="image/webp" ></data-src>
        <data-src srcset="{{image.url}} {{ image.width }}w, {{ image_small.url }} {{ image_small.width }}w"></data-src>
        <data-img src="{{ image.url }}" class="img-fluid card-img-top" width="{{ image.width }}" height="{{ image.height }}" alt="{{ self.image.title }}"></data-img>
    </picture>
    {% endthumbnail %}
    {% endthumbnail %}
    {% endthumbnail %}
    {% endthumbnail %}
    {% endif %}
</a>