bookwyrm/bookwyrm/templates/snippets/book_cover.html
André Jaenisch 9c92ba1698
Add attributes to images to hint async load
This was suggested on Matrix a while ago but I only found the time now to move forward with it.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
2023-03-01 14:14:42 +01:00

71 lines
2.1 KiB
HTML

{% spaceless %}
{% load i18n %}
{% load static %}
{% load imagekit %}
{% load utilities %}
{% if book.cover %}
<picture class="cover-container {{ cover_class }}">
{% if external_path %}
<img
class="book-cover"
src="{{ book.cover }}"
itemprop="thumbnailUrl"
alt="{{ book.alt_text|default:'' }}"
loading="lazy"
decoding="async"
>
{% else %}
{% if thumbnail_generation_enabled %}
{% if size_mobile %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{% get_book_cover_thumbnail book=book size=size_mobile ext='webp' %}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{% get_book_cover_thumbnail book=book size=size_mobile ext='jpg' %}"
/>
{% endif %}
<source
type="image/webp"
srcset="{% get_book_cover_thumbnail book=book size=size ext='webp' %}"
/>
<source
type="image/jpg"
srcset="{% get_book_cover_thumbnail book=book size=size ext='jpg' %}"
/>
{% endif %}
<img
alt="{{ book.alt_text|default:'' }}"
class="book-cover"
itemprop="thumbnailUrl"
src="{% if img_path is None %}{% get_media_prefix %}{% else %}{{ img_path }}{% endif %}{{ book.cover }}"
>
{% endif %}
</picture>
{% endif %}
{% if not book.cover and book.alt_text %}
<figure class="cover-container no-cover {{ cover_class }}">
<img
class="book-cover"
src="{% static "images/no_cover.jpg" %}"
alt="{% trans "No cover" %}"
>
<figcaption class="cover-caption">
<p>{{ book.alt_text }}</p>
</figcaption>
</figure>
{% endif %}
{% endspaceless %}