Merge pull request #1138 from joachimesque/images-django-imagekit
Generate thumnails for books
This commit is contained in:
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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 %}">
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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 %}
|
||||
|
@ -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">
|
||||
|
@ -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 %}
|
||||
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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 %}
|
||||
|
Reference in New Issue
Block a user