forked from mirrors/bookwyrm
7f0b3184a1
- Avoid specifying context-dependent values in CSS for components. Those values can be defined by the context calling the component. - Use `<figure>` with optional caption. - Reduce redundant markup. - Allow more variables to be passed to the book-cover (image path and class for the container). - Hide the book cover to screen readers.
50 lines
1.1 KiB
HTML
50 lines
1.1 KiB
HTML
{% spaceless %}
|
|
|
|
{% load bookwyrm_tags %}
|
|
{% load i18n %}
|
|
|
|
<figure
|
|
class="
|
|
cover-container
|
|
is-flex
|
|
is-align-items-center
|
|
|
|
{% if not book.cover %}
|
|
no-cover
|
|
{% endif %}
|
|
|
|
{% if size %}
|
|
is-{{ size }}
|
|
{% endif %}
|
|
|
|
{% if container_class %}
|
|
{{ container_class }}
|
|
{% endif %}
|
|
"
|
|
aria-hidden="true"
|
|
|
|
>
|
|
<img
|
|
class="book-cover"
|
|
|
|
{% if book.cover %}
|
|
src="{% if img_path is None %}/images/{% else %}{{ img_path }}{% endif %}{{ book.cover }}"
|
|
itemprop="thumbnailUrl"
|
|
|
|
{% if book.alt_text %}
|
|
alt="{{ book.alt_text }}"
|
|
title="{{ book.alt_text }}"
|
|
{% endif %}
|
|
{% else %}
|
|
src="/static/images/no_cover.jpg"
|
|
alt="{% trans "No cover" %}"
|
|
{% endif %}
|
|
>
|
|
|
|
{% if not book.cover and book.alt_text %}
|
|
<figcaption class="cover_caption">
|
|
<p>{{ book.alt_text }}</p>
|
|
</figcaption>
|
|
{% endif %}
|
|
</figure>
|
|
{% endspaceless %}
|