cover: Use book-cover as component:

- 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.

bookwyrm/templates/snippets/book_cover.html

@@ -3,27 +3,48 @@
 {% load bookwyrm_tags %}
 {% load i18n %}
 
-<div class="cover-container is-{{ size }}">
-    {% if book.cover %}
-        <img
-            class="book-cover"
-            src="/images/{{ book.cover }}"
-            alt="{{ book.alt_text }}"
-            title="{{ book.alt_text }}"
-            itemprop="thumbnailUrl"
-        >
-    {% else %}
-        <div class="no-cover book-cover">
-            <img
-                class="book-cover"
-                src="/static/images/no_cover.jpg"
-                alt="{% trans "No cover" %}"
-            >
+<figure
+    class="
+        cover-container
+        is-flex
+        is-align-items-center
 
-            <div>
-                <p>{{ book.alt_text }}</p>
-            </div>
-        </div>
+        {% 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 %}
-</div>
+</figure>
 {% endspaceless %}