Update book_cover.html

This commit is contained in:
Joachim 2021-05-24 16:16:09 +02:00
parent f60e9d76d2
commit 4c55f07f2a

View file

@ -1,41 +1,144 @@
{% spaceless %} {% spaceless %}
{% load i18n %} {% load i18n %}
{% load imagekit %}
<figure {% if book.cover %}
class=" <picture class="cover-container {{ cover_class }}">
cover-container {% with external_path|yesno:',/images/' as image_path %}
{{ cover_class }}
{% if not book.cover %} {% if size_mobile == 'xsmall' %}
no-cover {% generateimage 'bw:book:xsmall:webp' source=book.cover as th_xsmall_webp %}
{% generateimage 'bw:book:xsmall:jpg' source=book.cover as th_xsmall_jpg %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{{ image_path }}{{ th_xsmall_webp }}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{{ image_path }}{{ th_xsmall_jpg }}"
/>
{% elif size_mobile == 'small' %}
{% generateimage 'bw:book:small:webp' source=book.cover as th_small_webp %}
{% generateimage 'bw:book:small:jpg' source=book.cover as th_small_jpg %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{{ image_path }}{{ th_small_webp }}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{{ image_path }}{{ th_small_jpg }}"
/>
{% elif size_mobile == 'medium' %}
{% generateimage 'bw:book:medium:webp' source=book.cover as th_medium_webp %}
{% generateimage 'bw:book:medium:jpg' source=book.cover as th_medium_jpg %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{{ image_path }}{{ th_medium_webp }}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{{ image_path }}{{ th_medium_jpg }}"
/>
{% elif size_mobile == 'large' %}
{% generateimage 'bw:book:large:webp' source=book.cover as th_large_webp %}
{% generateimage 'bw:book:large:jpg' source=book.cover as th_large_jpg %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{{ image_path }}{{ th_large_webp }}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{{ image_path }}{{ th_large_jpg }}"
/>
{% elif size_mobile == 'xlarge' %}
{% generateimage 'bw:book:xlarge:webp' source=book.cover as th_xlarge_webp %}
{% generateimage 'bw:book:xlarge:jpg' source=book.cover as th_xlarge_jpg %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{{ image_path }}{{ th_xlarge_webp }}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{{ image_path }}{{ th_xlarge_jpg }}"
/>
{% elif size_mobile == 'xxlarge' %}
{% generateimage 'bw:book:xxlarge:webp' source=book.cover as th_xxlarge_webp %}
{% generateimage 'bw:book:xxlarge:jpg' source=book.cover as th_xxlarge_jpg %}
<source
media="(max-width: 768px)"
type="image/webp"
srcset="{{ image_path }}{{ th_xxlarge_webp }}"
/>
<source
media="(max-width: 768px)"
type="image/jpg"
srcset="{{ image_path }}{{ th_xxlarge_jpg }}"
/>
{% endif %} {% endif %}
"
{% if book.alt_text %} {% if size == 'xsmall' %}
title="{{ book.alt_text }}" {% generateimage 'bw:book:xsmall:webp' source=book.cover as th_xsmall_webp %}
{% endif %} {% generateimage 'bw:book:xsmall:jpg' source=book.cover as th_xsmall_jpg %}
> <source type="image/webp" srcset="{{ image_path }}{{ th_xsmall_webp }}"/>
<img <source type="image/jpg" srcset="{{ image_path }}{{ th_xsmall_jpg }}"/>
class="book-cover" {% elif size == 'small' %}
{% generateimage 'bw:book:small:webp' source=book.cover as th_small_webp %}
{% generateimage 'bw:book:small:jpg' source=book.cover as th_small_jpg %}
<source type="image/webp" srcset="{{ image_path }}{{ th_small_webp }}"/>
<source type="image/jpg" srcset="{{ image_path }}{{ th_small_jpg }}"/>
{% elif size == 'medium' %}
{% generateimage 'bw:book:medium:webp' source=book.cover as th_medium_webp %}
{% generateimage 'bw:book:medium:jpg' source=book.cover as th_medium_jpg %}
<source type="image/webp" srcset="{{ image_path }}{{ th_medium_webp }}"/>
<source type="image/jpg" srcset="{{ image_path }}{{ th_medium_jpg }}"/>
{% elif size == 'large' %}
{% generateimage 'bw:book:large:webp' source=book.cover as th_large_webp %}
{% generateimage 'bw:book:large:jpg' source=book.cover as th_large_jpg %}
<source type="image/webp" srcset="{{ image_path }}{{ th_large_webp }}"/>
<source type="image/jpg" srcset="{{ image_path }}{{ th_large_jpg }}"/>
{% elif size == 'xlarge' %}
{% generateimage 'bw:book:xlarge:webp' source=book.cover as th_xlarge_webp %}
{% generateimage 'bw:book:xlarge:jpg' source=book.cover as th_xlarge_jpg %}
<source type="image/webp" srcset="{{ image_path }}{{ th_xlarge_webp }}"/>
<source type="image/jpg" srcset="{{ image_path }}{{ th_xlarge_jpg }}"/>
{% elif size == 'xxlarge' %}
{% generateimage 'bw:book:xxlarge:webp' source=book.cover as th_xxlarge_webp %}
{% generateimage 'bw:book:xxlarge:jpg' source=book.cover as th_xxlarge_jpg %}
<source type="image/webp" srcset="{{ image_path }}{{ th_xxlarge_webp }}"/>
<source type="image/jpg" srcset="{{ image_path }}{{ th_xxlarge_jpg }}"/>
{% endif %}
{% if book.cover %} <img
src="{% if img_path is None %}/images/{% else %}{{ img_path }}{% endif %}{{ book.cover }}" class="book-cover"
src="{{ image_path }}{{ book.cover }}"
itemprop="thumbnailUrl" itemprop="thumbnailUrl"
alt="{{ book.alt_text|default:'' }}"
>
{% endwith %}
</picture>
{% endif %}
{% if book.alt_text %} {% if not book.cover and book.alt_text %}
alt="{{ book.alt_text }}" <figure class="cover-container no-cover {{ cover_class }}">
{% endif %} <img
{% else %} class="book-cover"
src="/static/images/no_cover.jpg" src="/static/images/no_cover.jpg"
alt="{% trans "No cover" %}" alt="{% trans "No cover" %}"
{% endif %}
>
{% if not book.cover and book.alt_text %}
<figcaption class="cover_caption"> <figcaption class="cover_caption">
>
<p>{{ book.alt_text }}</p> <p>{{ book.alt_text }}</p>
</figcaption> </figcaption>
{% endif %} </figure>
</figure> {% endif %}
{% endspaceless %} {% endspaceless %}