From ff95a709a8bfca6a39df8f4cd6c9d6de45ac7241 Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:14:21 +0200 Subject: [PATCH 01/25] Update .gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index cf88e9878..74eebb96b 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,6 @@ #nginx nginx/default.conf + +#macOS +.DS_Store From 77e81c4dbbf9180cad5e62aab05b3674e0d782f2 Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:14:51 +0200 Subject: [PATCH 02/25] Add django-imagekit to BookWyrm --- bookwyrm/settings.py | 1 + bw-dev | 5 ++++- requirements.txt | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/bookwyrm/settings.py b/bookwyrm/settings.py index d694e33fd..b1deed8fb 100644 --- a/bookwyrm/settings.py +++ b/bookwyrm/settings.py @@ -62,6 +62,7 @@ INSTALLED_APPS = [ "django_rename_app", "bookwyrm", "celery", + "imagekit", ] MIDDLEWARE = [ diff --git a/bw-dev b/bw-dev index c2b63bc17..1dd4c0ff7 100755 --- a/bw-dev +++ b/bw-dev @@ -107,7 +107,10 @@ case "$CMD" in populate_streams) runweb python manage.py populate_streams ;; + generateimages) + runweb python manage.py generateimages + ;; *) - echo "Unrecognised command. Try: build, clean, up, initdb, resetdb, makemigrations, migrate, bash, shell, dbshell, restart_celery, test, pytest, test_report, black, populate_feeds" + echo "Unrecognised command. Try: build, clean, up, initdb, resetdb, makemigrations, migrate, bash, shell, dbshell, restart_celery, test, pytest, test_report, black, populate_feeds, generateimages" ;; esac diff --git a/requirements.txt b/requirements.txt index 289d6fe68..7a458094e 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,5 +1,6 @@ celery==4.4.2 Django==3.2.0 +django-imagekit==4.0.2 django-model-utils==4.0.0 environs==7.2.0 flower==0.9.4 From f60e9d76d264e042bad39cf84025728bf512e919 Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:15:08 +0200 Subject: [PATCH 03/25] Generate generators --- bookwyrm/imagegenerators.py | 75 +++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 bookwyrm/imagegenerators.py diff --git a/bookwyrm/imagegenerators.py b/bookwyrm/imagegenerators.py new file mode 100644 index 000000000..bad9028e5 --- /dev/null +++ b/bookwyrm/imagegenerators.py @@ -0,0 +1,75 @@ +from imagekit import ImageSpec, register +from imagekit.processors import ResizeToFit + +class BookXSmallWebp(ImageSpec): + processors = [ResizeToFit(80, 80)] + format = 'WEBP' + options = { 'quality': 95 } + +class BookXSmallJpg(ImageSpec): + processors = [ResizeToFit(80, 80)] + format = 'JPEG' + options = { 'quality': 95 } + +class BookSmallWebp(ImageSpec): + processors = [ResizeToFit(100, 100)] + format = 'WEBP' + options = { 'quality': 95 } + +class BookSmallJpg(ImageSpec): + processors = [ResizeToFit(100, 100)] + format = 'JPEG' + options = { 'quality': 95 } + +class BookMediumWebp(ImageSpec): + processors = [ResizeToFit(150, 150)] + format = 'WEBP' + options = { 'quality': 95 } + +class BookMediumJpg(ImageSpec): + processors = [ResizeToFit(150, 150)] + format = 'JPEG' + options = { 'quality': 95 } + +class BookLargeWebp(ImageSpec): + processors = [ResizeToFit(200, 200)] + format = 'WEBP' + options = { 'quality': 95 } + +class BookLargeJpg(ImageSpec): + processors = [ResizeToFit(200, 200)] + format = 'JPEG' + options = { 'quality': 95 } + +class BookXLargeWebp(ImageSpec): + processors = [ResizeToFit(250, 250)] + format = 'WEBP' + options = { 'quality': 95 } + +class BookXLargeJpg(ImageSpec): + processors = [ResizeToFit(250, 250)] + format = 'JPEG' + options = { 'quality': 95 } + +class BookXxLargeWebp(ImageSpec): + processors = [ResizeToFit(500, 500)] + format = 'WEBP' + options = { 'quality': 95 } + +class BookXxLargeJpg(ImageSpec): + processors = [ResizeToFit(500, 500)] + format = 'JPEG' + options = { 'quality': 95 } + +register.generator('bw:book:xsmall:webp', BookXSmallWebp) +register.generator('bw:book:xsmall:jpg', BookXSmallJpg) +register.generator('bw:book:small:webp', BookSmallWebp) +register.generator('bw:book:small:jpg', BookSmallJpg) +register.generator('bw:book:medium:webp', BookMediumWebp) +register.generator('bw:book:medium:jpg', BookMediumJpg) +register.generator('bw:book:large:webp', BookLargeWebp) +register.generator('bw:book:large:jpg', BookLargeJpg) +register.generator('bw:book:xlarge:webp', BookXLargeWebp) +register.generator('bw:book:xlarge:jpg', BookXLargeJpg) +register.generator('bw:book:xxlarge:webp', BookXxLargeWebp) +register.generator('bw:book:xxlarge:jpg', BookXxLargeJpg) From 4c55f07f2ab17cde6e95fdb699063afcedb0ff50 Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:16:09 +0200 Subject: [PATCH 04/25] Update book_cover.html --- bookwyrm/templates/snippets/book_cover.html | 153 ++++++++++++++++---- 1 file changed, 128 insertions(+), 25 deletions(-) diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html index 16ab305e5..6a15f0fd4 100644 --- a/bookwyrm/templates/snippets/book_cover.html +++ b/bookwyrm/templates/snippets/book_cover.html @@ -1,41 +1,144 @@ {% spaceless %} {% load i18n %} +{% load imagekit %} -
+ {% with external_path|yesno:',/images/' as image_path %} - {% if not book.cover %} - no-cover + {% if size_mobile == 'xsmall' %} + {% generateimage 'bw:book:xsmall:webp' source=book.cover as th_xsmall_webp %} + {% generateimage 'bw:book:xsmall:jpg' source=book.cover as th_xsmall_jpg %} + + + {% elif size_mobile == 'small' %} + {% generateimage 'bw:book:small:webp' source=book.cover as th_small_webp %} + {% generateimage 'bw:book:small:jpg' source=book.cover as th_small_jpg %} + + + {% elif size_mobile == 'medium' %} + {% generateimage 'bw:book:medium:webp' source=book.cover as th_medium_webp %} + {% generateimage 'bw:book:medium:jpg' source=book.cover as th_medium_jpg %} + + + {% elif size_mobile == 'large' %} + {% generateimage 'bw:book:large:webp' source=book.cover as th_large_webp %} + {% generateimage 'bw:book:large:jpg' source=book.cover as th_large_jpg %} + + + {% elif size_mobile == 'xlarge' %} + {% generateimage 'bw:book:xlarge:webp' source=book.cover as th_xlarge_webp %} + {% generateimage 'bw:book:xlarge:jpg' source=book.cover as th_xlarge_jpg %} + + + {% elif size_mobile == 'xxlarge' %} + {% generateimage 'bw:book:xxlarge:webp' source=book.cover as th_xxlarge_webp %} + {% generateimage 'bw:book:xxlarge:jpg' source=book.cover as th_xxlarge_jpg %} + + {% endif %} - " - {% if book.alt_text %} - title="{{ book.alt_text }}" - {% endif %} -> - + + {% elif size == 'small' %} + {% generateimage 'bw:book:small:webp' source=book.cover as th_small_webp %} + {% generateimage 'bw:book:small:jpg' source=book.cover as th_small_jpg %} + + + {% elif size == 'medium' %} + {% generateimage 'bw:book:medium:webp' source=book.cover as th_medium_webp %} + {% generateimage 'bw:book:medium:jpg' source=book.cover as th_medium_jpg %} + + + {% elif size == 'large' %} + {% generateimage 'bw:book:large:webp' source=book.cover as th_large_webp %} + {% generateimage 'bw:book:large:jpg' source=book.cover as th_large_jpg %} + + + {% elif size == 'xlarge' %} + {% generateimage 'bw:book:xlarge:webp' source=book.cover as th_xlarge_webp %} + {% generateimage 'bw:book:xlarge:jpg' source=book.cover as th_xlarge_jpg %} + + + {% elif size == 'xxlarge' %} + {% generateimage 'bw:book:xxlarge:webp' source=book.cover as th_xxlarge_webp %} + {% generateimage 'bw:book:xxlarge:jpg' source=book.cover as th_xxlarge_jpg %} + + + {% endif %} - {% if book.cover %} - src="{% if img_path is None %}/images/{% else %}{{ img_path }}{% endif %}{{ book.cover }}" + {{ book.alt_text|default:'' }} + {% endwith %} + +{% endif %} - {% if book.alt_text %} - alt="{{ book.alt_text }}" - {% endif %} - {% else %} +{% if not book.cover and book.alt_text %} +
+ {% trans - - {% if not book.cover and book.alt_text %}
+ >

{{ book.alt_text }}

- {% endif %} -
+
+{% endif %} {% endspaceless %} From c1456ce8531d9243ab2d68c430e4a791d374d88a Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:16:33 +0200 Subject: [PATCH 05/25] Update .cover-caption name and styles --- bookwyrm/static/css/bookwyrm.css | 9 +++++++-- bookwyrm/templates/snippets/book_cover.html | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 3db25d1fe..5a4495c1e 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -219,16 +219,21 @@ body { /* Cover caption * -------------------------------------------------------------------------- */ -.no-cover .cover_caption { +.no-cover .cover-caption { position: absolute; top: 0; right: 0; bottom: 0; left: 0; - padding: 0.25em; + padding: 0.5em; font-size: 0.75em; color: white; background-color: #002549; + display: flex; + align-items: center; + justify-content: center; + white-space: initial; + text-align: center; } /** Avatars diff --git a/bookwyrm/templates/snippets/book_cover.html b/bookwyrm/templates/snippets/book_cover.html index 6a15f0fd4..fd1fb438a 100644 --- a/bookwyrm/templates/snippets/book_cover.html +++ b/bookwyrm/templates/snippets/book_cover.html @@ -135,8 +135,8 @@ class="book-cover" src="/static/images/no_cover.jpg" alt="{% trans "No cover" %}" -
> +

{{ book.alt_text }}

From dc494323221729d7e06389d1df2f7c6f04ea3325 Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:17:39 +0200 Subject: [PATCH 06/25] Change img_path to external_path --- bookwyrm/templates/snippets/search_result_text.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookwyrm/templates/snippets/search_result_text.html b/bookwyrm/templates/snippets/search_result_text.html index e39d34104..a18b125f7 100644 --- a/bookwyrm/templates/snippets/search_result_text.html +++ b/bookwyrm/templates/snippets/search_result_text.html @@ -1,7 +1,7 @@ {% load i18n %}
- {% 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 %}
From 36f447210a20e0dde7bb1f86fc27e1f86ec5972e Mon Sep 17 00:00:00 2001 From: Joachim Date: Mon, 24 May 2021 16:18:05 +0200 Subject: [PATCH 07/25] Specify sizes on all templates --- bookwyrm/templates/book/book.html | 2 +- bookwyrm/templates/book/edit_book.html | 2 +- bookwyrm/templates/book/editions.html | 2 +- bookwyrm/templates/discover/large-book.html | 2 +- bookwyrm/templates/discover/small-book.html | 2 +- bookwyrm/templates/get_started/book_preview.html | 2 +- bookwyrm/templates/import_status.html | 2 +- bookwyrm/templates/lists/curate.html | 2 +- bookwyrm/templates/lists/list.html | 4 ++-- bookwyrm/templates/lists/list_items.html | 2 +- bookwyrm/templates/snippets/status/content_status.html | 2 +- bookwyrm/templates/snippets/status/generated_status.html | 2 +- bookwyrm/templates/user/shelf/shelf.html | 2 +- bookwyrm/templates/user/user.html | 2 +- 14 files changed, 15 insertions(+), 15 deletions(-) diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html index df76d8e11..b1b893b7d 100644 --- a/bookwyrm/templates/book/book.html +++ b/bookwyrm/templates/book/book.html @@ -45,7 +45,7 @@
- {% 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 %}
diff --git a/bookwyrm/templates/book/edit_book.html b/bookwyrm/templates/book/edit_book.html index 8dae1d044..0736eabcf 100644 --- a/bookwyrm/templates/book/edit_book.html +++ b/bookwyrm/templates/book/edit_book.html @@ -183,7 +183,7 @@

{% trans "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' %}
diff --git a/bookwyrm/templates/book/editions.html b/bookwyrm/templates/book/editions.html index 0d5c10447..d22dd71a7 100644 --- a/bookwyrm/templates/book/editions.html +++ b/bookwyrm/templates/book/editions.html @@ -15,7 +15,7 @@
diff --git a/bookwyrm/templates/discover/large-book.html b/bookwyrm/templates/discover/large-book.html index 93026991e..2f99a75a1 100644 --- a/bookwyrm/templates/discover/large-book.html +++ b/bookwyrm/templates/discover/large-book.html @@ -9,7 +9,7 @@ {% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto-tablet' %} + >{% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-w-auto-tablet' size='xlarge' %} {% include 'snippets/stars.html' with rating=book|rating:request.user %}
diff --git a/bookwyrm/templates/discover/small-book.html b/bookwyrm/templates/discover/small-book.html index 73133de45..82cd4a7ee 100644 --- a/bookwyrm/templates/discover/small-book.html +++ b/bookwyrm/templates/discover/small-book.html @@ -5,7 +5,7 @@ {% if book %} {% with book=book %} - {% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-h-l-tablet is-w-auto align to-b to-l' %} + {% include 'snippets/book_cover.html' with cover_class='is-w-l-mobile is-h-l-tablet is-w-auto align to-b to-l' size='large' %} {% include 'snippets/stars.html' with rating=book|rating:request.user %} diff --git a/bookwyrm/templates/get_started/book_preview.html b/bookwyrm/templates/get_started/book_preview.html index d8941ad50..893e7593a 100644 --- a/bookwyrm/templates/get_started/book_preview.html +++ b/bookwyrm/templates/get_started/book_preview.html @@ -1,6 +1,6 @@ {% load i18n %}
- {% 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' %}