Merge pull request #1138 from joachimesque/images-django-imagekit

Generate thumnails for books
This commit is contained in:
Mouse Reeve
2021-08-18 19:53:12 -06:00
committed by GitHub
27 changed files with 296 additions and 51 deletions

View File

@ -62,7 +62,7 @@
<div class="columns">
<div class="column is-one-fifth">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m-mobile' %}
{% include 'snippets/book_cover.html' with size='xxlarge' size_mobile='medium' book=book cover_class='is-h-m-mobile' %}
{% include 'snippets/rate_action.html' with user=request.user book=book %}
<div class="mb-3">

View File

@ -220,7 +220,7 @@
<h2 class="title is-4">{% trans "Cover" %}</h2>
<div class="columns">
<div class="column is-3 is-cover">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xl-mobile is-w-auto-tablet' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xl-mobile is-w-auto-tablet' size_mobile='xlarge' size='large' %}
</div>
<div class="column">

View File

@ -15,7 +15,7 @@
<div class="columns is-gapless mb-6">
<div class="column is-cover">
<a href="{{ book.local_path }}">
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-m is-h-m align to-l-mobile' %}
{% include 'snippets/book_cover.html' with size='medium' book=book cover_class='is-w-m is-h-m align to-l-mobile' %}
</a>
</div>

View File

@ -10,7 +10,7 @@
<a
class="align to-b to-l"
href="{{ book.local_path }}"
>{% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto-tablet' %}</a>
>{% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto-tablet' size='xlarge' %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}
<h3 class="title is-6">

View File

@ -6,7 +6,7 @@
{% if status.book or status.mention_books.exists %}
{% load_book status as book %}
<a href="{{ book.local_path }}">
{% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto align to-b to-l' %}
{% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto align to-b to-l' size='large' %}
</a>
<div class="block mt-2">

View File

@ -1,6 +1,6 @@
{% load i18n %}
<div class="column is-cover">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-l is-h-m-mobile' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-l is-h-m-mobile' size_mobile='medium' size='large' %}
<div class="select is-small mt-1 mb-3">
<select name="{{ book.id }}" aria-label="{% blocktrans with book_title=book.title %}Have you read {{ book_title }}?{% endblocktrans %}">

View File

@ -132,7 +132,7 @@
<td>
{% if item.book %}
<a href="{{ item.book.local_path }}">
{% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' %}
{% include 'snippets/book_cover.html' with book=item.book cover_class='is-h-s' size='small' %}
</a>
{% endif %}
</td>

View File

@ -32,7 +32,7 @@
href="{{ book.local_path }}"
aria-hidden="true"
>
{% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' %}
{% include 'snippets/book_cover.html' with cover_class='is-w-xs-mobile is-w-s is-h-xs-mobile is-h-s' size_mobile='xsmall' size='small' %}
</a>
<div class="column ml-3">

View File

@ -41,7 +41,7 @@
>
<div class="column is-3-mobile is-2-tablet is-cover align to-t">
<a href="{{ item.book.local_path }}" aria-hidden="true">
{% include 'snippets/book_cover.html' with cover_class='is-w-auto is-h-m-tablet is-align-items-flex-start' %}
{% include 'snippets/book_cover.html' with cover_class='is-w-auto is-h-m-tablet is-align-items-flex-start' size='medium' %}
</a>
</div>
@ -161,7 +161,7 @@
href="{{ book.local_path }}"
aria-hidden="true"
>
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto is-h-s-mobile align to-t' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-w-auto is-h-s-mobile align to-t' size='small' %}
</a>
<div class="column ml-3">

View File

@ -14,7 +14,7 @@
<div class="card-image columns is-mobile is-gapless is-clipped">
{% for book in list_books %}
<a class="column is-cover" href="{{ book.book.local_path }}">
{% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' aria='show' %}
{% include 'snippets/book_cover.html' with book=book.book cover_class='is-h-s' size='small' aria='show' %}
</a>
{% endfor %}
</div>

View File

@ -2,41 +2,67 @@
{% load i18n %}
{% load static %}
{% load imagekit %}
{% load utilities %}
<figure
class="
cover-container
{{ cover_class }}
{% if not book.cover %}
no-cover
{% endif %}
"
{% if book.alt_text %}
title="{{ book.alt_text }}"
{% endif %}
>
<img
class="book-cover"
{% if book.cover %}
src="{% if img_path is None %}{% get_media_prefix %}{% else %}{{ img_path }}{% endif %}{{ book.cover }}"
itemprop="thumbnailUrl"
{% if book.alt_text %}
alt="{{ book.alt_text }}"
{% endif %}
{% 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 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" %}"
{% endif %}
>
{% if not book.cover and book.alt_text %}
<figcaption class="cover_caption">
>
<figcaption class="cover-caption">
<p>{{ book.alt_text }}</p>
</figcaption>
{% endif %}
</figure>
</figure>
{% endif %}
{% endspaceless %}

View File

@ -1,7 +1,7 @@
{% load i18n %}
<div class="columns is-mobile is-gapless">
<div class="column is-cover">
{% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' img_path=false %}
{% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' external_path=True %}
</div>
<div class="column is-10 ml-3">

View File

@ -19,7 +19,7 @@
<div class="column is-cover">
<div class="columns is-mobile is-gapless">
<div class="column is-cover">
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-mobile is-h-l-tablet' %}</a>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-mobile is-h-l-tablet' size_mobile='medium' size='large' %}</a>
{% include 'snippets/stars.html' with rating=book|rating:request.user %}

View File

@ -8,7 +8,7 @@
{% with book=status.book|default:status.mention_books.first %}
<div class="columns is-mobile is-gapless">
<a class="column is-cover is-narrow" href="{{ book.local_path }}">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xs is-h-s-tablet' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-xs is-h-s-tablet' size='small' size_mobile='xsmall' %}
</a>
<div class="column ml-3">

View File

@ -94,7 +94,7 @@
{% spaceless %}
<tr class="book-preview">
<td class="book-preview-top-row">
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-tablet is-h-s' %}</a>
<a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book cover_class='is-w-s-tablet is-h-s' size='small' %}</a>
</td>
<td data-title="{% trans "Title" %}">
<a href="{{ book.local_path }}">{{ book.title }}</a>

View File

@ -35,7 +35,7 @@
{% for book in shelf.books %}
<div class="control">
<a href="{{ book.local_path }}">
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m is-h-s-mobile' %}
{% include 'snippets/book_cover.html' with book=book cover_class='is-h-m is-h-s-mobile' size_mobile='small' size='medium' %}
</a>
</div>
{% endfor %}