moviewyrm/bookwyrm/templates/snippets/book_cover.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:'' }}"
            >
        {% else %}

            {% if enable_thumbnail_generation %}

                {% if size_mobile == 'xsmall' %}
                    <source
                        media="(max-width: 768px)"
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='xsmall' ext='webp' %}"
                    />
                    <source
                        media="(max-width: 768px)"
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='xsmall' ext='jpg' %}"
                    />
                {% elif size_mobile == 'small' %}
                    <source
                        media="(max-width: 768px)"
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='small' ext='webp' %}"
                    />
                    <source
                        media="(max-width: 768px)"
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='small' ext='jpg' %}"
                    />
                {% elif size_mobile == 'medium' %}
                    <source
                        media="(max-width: 768px)"
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='medium' ext='webp' %}"
                    />
                    <source
                        media="(max-width: 768px)"
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='medium' ext='jpg' %}"
                    />
                {% elif size_mobile == 'large' %}
                    <source
                        media="(max-width: 768px)"
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='large' ext='webp' %}"
                    />
                    <source
                        media="(max-width: 768px)"
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='large' ext='jpg' %}"
                    />
                {% elif size_mobile == 'xlarge' %}
                    <source
                        media="(max-width: 768px)"
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='xlarge' ext='webp' %}"
                    />
                    <source
                        media="(max-width: 768px)"
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='xlarge' ext='jpg' %}"
                    />
                {% elif size_mobile == 'xxlarge' %}
                    <source
                        media="(max-width: 768px)"
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='xxlarge' ext='webp' %}"
                    />
                    <source
                        media="(max-width: 768px)"
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='xxlarge' ext='jpg' %}"
                    />
                {% endif %}

                {% if size == 'xsmall' %}
                    <source
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='xsmall' ext='webp' %}"
                    />
                    <source
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='xsmall' ext='jpg' %}"
                    />
                {% elif size == 'small' %}
                    <source
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='small' ext='webp' %}"
                    />
                    <source
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='small' ext='jpg' %}"
                    />
                {% elif size == 'medium' %}
                    <source
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='medium' ext='webp' %}"
                    />
                    <source
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='medium' ext='jpg' %}"
                    />
                {% elif size == 'large' %}
                    <source
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='large' ext='webp' %}"
                    />
                    <source
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='large' ext='jpg' %}"
                    />
                {% elif size == 'xlarge' %}
                    <source
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='xlarge' ext='webp' %}"
                    />
                    <source
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='xlarge' ext='jpg' %}"
                    />
                {% elif size == 'xxlarge' %}
                    <source
                        type="image/webp"
                        srcset="{% get_book_cover_thumbnail book=book size='xxlarge' ext='webp' %}"
                    />
                    <source
                        type="image/jpg"
                        srcset="{% get_book_cover_thumbnail book=book size='xxlarge' ext='jpg' %}"
                    />
                {% endif %}

            {% 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 %}