From c00343abfe439ed16327cd18e71a3ad9ef57b6a0 Mon Sep 17 00:00:00 2001
From: Colin Powell <colin@unbl.ink>
Date: Tue, 28 Mar 2023 14:22:38 -0400
Subject: [PATCH] First run at adding thumbnailing to images

---
 poetry.lock                                   | 14 ++++-
 pyproject.toml                                |  1 +
 vrobbler/settings.py                          |  1 +
 vrobbler/templates/books/book_detail.html     |  7 ++-
 vrobbler/templates/music/album_detail.html    |  7 ++-
 vrobbler/templates/music/artist_detail.html   |  7 ++-
 .../scrobbles/long_plays_in_progress.html     | 17 ++++--
 .../templates/scrobbles/scrobble_list.html    | 59 ++++++++++---------
 .../videogames/videogame_detail.html          |  5 +-
 vrobbler/templates/videos/video_detail.html   |  7 ++-
 10 files changed, 84 insertions(+), 41 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index b612f5e..31a44e3 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1580,6 +1580,14 @@ category = "main"
 optional = false
 python-versions = ">=3.7"
 
+[[package]]
+name = "sorl-thumbnail"
+version = "12.9.0"
+description = "Thumbnails for Django"
+category = "main"
+optional = false
+python-versions = ">=3.7"
+
 [[package]]
 name = "sortedcontainers"
 version = "2.4.0"
@@ -1885,7 +1893,7 @@ testing = ["big-O", "flake8 (<5)", "jaraco.functools", "jaraco.itertools", "more
 [metadata]
 lock-version = "1.1"
 python-versions = "^3.8"
-content-hash = "2076d7c876e5086dfa822014940f0921879f505f38f9175a77320082b4439430"
+content-hash = "b355c69693f7e45bf42429bcb195dceae3f2057e0b46fd937188cb649f972a24"
 
 [metadata.files]
 aiohttp = [
@@ -3144,6 +3152,10 @@ sniffio = [
     {file = "sniffio-1.3.0-py3-none-any.whl", hash = "sha256:eecefdce1e5bbfb7ad2eeaabf7c1eeb404d7757c379bd1f7e5cce9d8bf425384"},
     {file = "sniffio-1.3.0.tar.gz", hash = "sha256:e60305c5e5d314f5389259b7f22aaa33d8f7dee49763119234af3755c55b9101"},
 ]
+sorl-thumbnail = [
+    {file = "sorl-thumbnail-12.9.0.tar.gz", hash = "sha256:0cbc2f52152e7f2266e3c2cb4ae5d83afd2e96fd5e1c42e5667362baaa3d2db3"},
+    {file = "sorl_thumbnail-12.9.0-py3-none-any.whl", hash = "sha256:ec586724bea7dc8c53561ce18335ea641fcd0e560d6387b2353a2afdd06705a4"},
+]
 sortedcontainers = [
     {file = "sortedcontainers-2.4.0-py2.py3-none-any.whl", hash = "sha256:a163dcaede0f1c021485e957a39245190e74249897e2ae4b2aa38595db237ee0"},
     {file = "sortedcontainers-2.4.0.tar.gz", hash = "sha256:25caa5a06cc30b6b83d11423433f65d1f9d76c4c6a0c90e3379eaa43b9bfdb88"},
diff --git a/pyproject.toml b/pyproject.toml
index 8a3e608..845d771 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -40,6 +40,7 @@ beautifulsoup4 = "^4.11.2"
 django-storages = "^1.13.2"
 boto3 = "^1.26.98"
 stream-sqlite = "^0.0.41"
+sorl-thumbnail = "^12.9.0"
 
 [tool.poetry.dev-dependencies]
 Werkzeug = "2.0.3"
diff --git a/vrobbler/settings.py b/vrobbler/settings.py
index 7ec30bb..0b23c60 100644
--- a/vrobbler/settings.py
+++ b/vrobbler/settings.py
@@ -101,6 +101,7 @@ INSTALLED_APPS = [
     "django.contrib.humanize",
     "django_filters",
     "django_extensions",
+    "sorl.thumbnail",
     "storages",
     "taggit",
     "rest_framework.authtoken",
diff --git a/vrobbler/templates/books/book_detail.html b/vrobbler/templates/books/book_detail.html
index 095a0ce..1005179 100644
--- a/vrobbler/templates/books/book_detail.html
+++ b/vrobbler/templates/books/book_detail.html
@@ -2,6 +2,7 @@
 {% load mathfilters %}
 {% load static %}
 {% load naturalduration %}
+{% load thumbnail %}
 
 {% block title %}{{object.title}}{% endblock %}
 
@@ -10,9 +11,11 @@
 <div class="row">
 
     {% if object.cover%}
-    <p style="float:left; width:402px; padding:0; border: 1px solid #ccc">
-        <img src="{{object.cover.url}}" width=400 />
+    {% thumbnail object.cover "400" as im %}
+    <p style="float:left; width:{{im.width}}px; padding:0; border: 1px solid #ccc">
+        <img src="{{im.url}}" width={{im.width}} height={{im.height}}/>
     </p>
+    {% endthumbnail %}
     {% endif %}
     <div style="float:left; width:600px; margin-left:10px; ">
         {% if object.summary %}
diff --git a/vrobbler/templates/music/album_detail.html b/vrobbler/templates/music/album_detail.html
index 4ecb263..740e34d 100644
--- a/vrobbler/templates/music/album_detail.html
+++ b/vrobbler/templates/music/album_detail.html
@@ -1,6 +1,7 @@
 {% extends "base_list.html" %}
 {% load mathfilters %}
 {% load static %}
+{% load thumbnail %}
 
 {% block title %}{{object.name}}{% endblock %}
 
@@ -9,9 +10,11 @@
 <div class="row">
 
     {% if object.cover_image %}
-    <p style="float:left; width:302px; padding:0;">
-        <img src="{{object.cover_image.url}}" width=300 height=300 />
+    {% thumbnail object.cover_image "300x300" as im %}
+    <p style="float:left; width:{{im.width}}px; padding:0;">
+        <img src="{{im.url}}" width={{im.width}} height={{im.height}} />
     </p>
+    {% endthumbnail %}
     {% endif %}
     <div style="float:left; width:600px; margin-left:10px; ">
         {% if object.theaudiodb_description %}
diff --git a/vrobbler/templates/music/artist_detail.html b/vrobbler/templates/music/artist_detail.html
index 1d75a70..0198af0 100644
--- a/vrobbler/templates/music/artist_detail.html
+++ b/vrobbler/templates/music/artist_detail.html
@@ -1,6 +1,7 @@
 {% extends "base_list.html" %}
 {% load mathfilters %}
 {% load static %}
+{% load thumbnail %}
 
 {% block title %}{{object.name}}{% endblock %}
 
@@ -8,9 +9,11 @@
 <div class="row">
 
     {% if object.thumbnail %}
-    <p style="float:left; width:300px; margin-right:10px;">
-        <img style="border:1px solid #ccc;" src="{{artist.thumbnail.url}}" width=300 height=300 />
+    {% thumbnail object.thumbnail "300x300" as im %}
+    <p style="float:left; width:{{im.width}}; margin-right:10px;">
+        <img style="border:1px solid #ccc;" src="{{im.url}}" width={{im.width}} height={{im.height}} />
     </p>
+    {% endthumbnail %}
     {% else %}
     {% if object.album_set.first.cover_image %}
     <p style="float:left; width:302px; padding:0; border: 1px solid #ccc">
diff --git a/vrobbler/templates/scrobbles/long_plays_in_progress.html b/vrobbler/templates/scrobbles/long_plays_in_progress.html
index ce276e6..e57d348 100644
--- a/vrobbler/templates/scrobbles/long_plays_in_progress.html
+++ b/vrobbler/templates/scrobbles/long_plays_in_progress.html
@@ -1,4 +1,5 @@
 {% extends "base_list.html" %}
+{% load thumbnail %}
 
 {% block title %}Long Plays{% endblock %}
 
@@ -23,9 +24,13 @@
         <dl>
             <dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
             {% if media.hltb_cover %}
-            <dd><a href="{{media.get_absolute_url}}"><img src="{{media.hltb_cover.url}}" width=200 height=200 /></a></dd>
+            {% thumbnail media.hltb_cover "200" as im %}
+            <dd><a href="{{media.get_absolute_url}}"><img src="{{im.url}}" width={{im.width}} height={{im.height}} /></a></dd>
+            {% endthumbnail %}
             {% else %}
-            <dd><a href="{{media.get_absolute_url}}"><img src="{{media.cover.url}}" style="width: 200px; height: 200px; object-fit:cover; " /></a></dd>
+            {% thumbnail media.cover "200" as im %}
+            <dd><a href="{{media.get_absolute_url}}"><img src="{{im.url}}" width={{im.width}} height={{im.height}} /></a></dd>
+            {% endthumbnail %}
             {% endif %}
             <dd>
                 {% if media.is_long_play_in_progress %}Playing{% else %}<a type="button" class="btn btn-sm btn-primary" href="{{media.get_start_url}}">Resume</a>{% endif %}
@@ -72,12 +77,16 @@
         {% for media in completed %}
         {% if media.hltb_cover %}
         <dl>
-            <dd><a href="{{media.get_absolute_url}}"><img src="{{media.hltb_cover.url}}" width=200 /></a></dd>
+            {% thumbnail media.hltb_cover "200" as im %}
+            <dd><a href="{{media.get_absolute_url}}"><img src="{{im.url}}" width={{im.width}} height={{im.height}} /></a></dd>
+            {% endthumbnail %}
             <dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
         </dl>
         {% elif media.cover %}
         <dl>
-            <dd><a href="{{media.get_absolute_url}}"><img src="{{media.cover.url}}" width=200 /></a></dd>
+            {% thumbnail media.cover "200" as im %}
+            <dd><a href="{{media.get_absolute_url}}"><img src="{{url}}" width={{im.width}} height={{im.height}} /></a></dd>
+            {% endthumbnail %}
             <dt><a href="{{media.get_absolute_url}}">{{media.title}}</a></dt>
         </dl>
         {% endif %}
diff --git a/vrobbler/templates/scrobbles/scrobble_list.html b/vrobbler/templates/scrobbles/scrobble_list.html
index 8d12e01..1b620aa 100644
--- a/vrobbler/templates/scrobbles/scrobble_list.html
+++ b/vrobbler/templates/scrobbles/scrobble_list.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% load humanize %}
 {% load static %}
+{% load thumbnail %}
 
 {% block head_extra  %}
 <style>
@@ -107,7 +108,7 @@
                                 <div class="caption">#1 {{artists.0.name}}</div>
                                 {% if artists.0 %}
                                 {% if artists.0.thumbnail %}
-                                <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{artists.0.thumbnail.url}}" width="300px"></a>
+                                {% thumbnail artists.0.thumbnail "300x" as im %}<a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                 {% else %}
                                 <a href="{{artists.0.get_absolute_url}}"><img lt="{{artists.0.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
                                 {% endif %}
@@ -120,7 +121,7 @@
                                     <div class="caption-medium">#2 {{artists.1.name}}</div>
                                     {% if artists.1 %}
                                     {% if artists.1.thumbnail %}
-                                    <a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{artists.1.thumbnail.url}}" width="150px"></a>
+                                    {% thumbnail artists.1.thumbnail "150" as im %}<a href="{{artists.1.get_absolute_url}}"><img lt="{{artists.1.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.1.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
                                     {% endif %}
@@ -130,7 +131,7 @@
                                     <div class="caption-medium">#3 {{artists.2.name}}</div>
                                     {% if artists.2 %}
                                     {% if artists.2.thumbnail %}
-                                    <a href="{{artists.2.get_absolute_url}}"><img src="{{artists.2.thumbnail.url}}" width="150px"></a>
+                                    {% thumbnail artists.2.thumbnail "150" as im %}<a href="{{artists.2.get_absolute_url}}"><img lt="{{artists.2.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.2.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
                                     {% endif %}
@@ -140,7 +141,7 @@
                                     <div class="caption-medium">#4 {{artists.3.name}}</div>
                                     {% if artists.3 %}
                                     {% if artists.3.thumbnail %}
-                                    <a href="{{artists.3.get_absolute_url}}"><img src="{{artists.3.thumbnail.url}}" width="150px"></a>
+                                    {% thumbnail artists.3.thumbnail "150" as im %}<a href="{{artists.3.get_absolute_url}}"><img lt="{{artists.3.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.3.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
                                     {% endif %}
@@ -150,7 +151,7 @@
                                     <div class="caption-medium">#5 {{artists.4.name}}</div>
                                     {% if artists.4 %}
                                     {% if artists.4.thumbnail %}
-                                    <a href="{{artists.4.get_absolute_url}}"><img src="{{artists.4.thumbnail.url}}" width="150px"></a>
+                                    {% thumbnail artists.4.thumbnail "150" as im %}<a href="{{artists.4.get_absolute_url}}"><img lt="{{artists.4.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.4.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
                                     {% endif %}
@@ -164,7 +165,7 @@
                                     <div class="caption-small">#6 {{artists.5.name}}</div>
                                     {% if artists.5 %}
                                     {% if artists.5.thumbnail %}
-                                    <a href="{{artists.5.get_absolute_url}}"><img src="{{artists.5.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.5.thumbnail "100" as im %}<a href="{{artists.5.get_absolute_url}}"><img lt="{{artists.5.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.5.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -174,7 +175,7 @@
                                     <div class="caption-small">#7 {{artists.6.name}}</div>
                                     {% if artists.6 %}
                                     {% if artists.6.thumbnail %}
-                                    <a href="{{artists.6.get_absolute_url}}"><img src="{{artists.6.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.6.thumbnail "100" as im %}<a href="{{artists.6.get_absolute_url}}"><img lt="{{artists.6.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.6.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -184,7 +185,7 @@
                                     <div class="caption-small">#8 {{artists.7.name}}</div>
                                     {% if artists.7 %}
                                     {% if artists.7.thumbnail %}
-                                    <a href="{{artists.7.get_absolute_url}}"><img src="{{artists.7.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.7.thumbnail "100" as im %}<a href="{{artists.7.get_absolute_url}}"><img lt="{{artists.7.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.7.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -194,7 +195,7 @@
                                     <div class="caption-small">#9 {{artists.8.name}}</div>
                                     {% if artists.8 %}
                                     {% if artists.8.thumbnail %}
-                                    <a href="{{artists.8.get_absolute_url}}"><img src="{{artists.8.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.8.thumbnail "100" as im %}<a href="{{artists.8.get_absolute_url}}"><img lt="{{artists.8.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.8.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -204,7 +205,7 @@
                                     <div class="caption-small">#10 {{artists.9.name}}</div>
                                     {% if artists.9 %}
                                     {% if artists.9.thumbnail %}
-                                    <a href="{{artists.9.get_absolute_url}}"><img src="{{artists.9.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.9.thumbnail "100" as im %}<a href="{{artists.9.get_absolute_url}}"><img lt="{{artists.9.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.9.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -214,7 +215,7 @@
                                     <div class="caption-small">#11 {{artists.10.name}}</div>
                                     {% if artists.10 %}
                                     {% if artists.10.thumbnail %}
-                                    <a href="{{artists.10.get_absolute_url}}"><img src="{{artists.10.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.10.thumbnail "100" as im %}<a href="{{artists.10.get_absolute_url}}"><img lt="{{artists.10.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.10.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -224,7 +225,7 @@
                                     <div class="caption-small">#12 {{artists.11.name}}</div>
                                     {% if artists.11 %}
                                     {% if artists.11.thumbnail %}
-                                    <a href="{{artists.11.get_absolute_url}}"><img src="{{artists.11.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.11.thumbnail "100" as im %}<a href="{{artists.11.get_absolute_url}}"><img lt="{{artists.11.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.11.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -234,7 +235,7 @@
                                     <div class="caption-small">#13 {{artists.12.name}}</div>
                                     {% if artists.12 %}
                                     {% if artists.12.thumbnail %}
-                                    <a href="{{artists.12.get_absolute_url}}"><img src="{{artists.12.thumbnail.url}}" width="100px"></a>
+                                    {% thumbnail artists.12.thumbnail "100" as im %}<a href="{{artists.12.get_absolute_url}}"><img lt="{{artists.12.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{artists.12.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
                                     {% endif %}
@@ -278,7 +279,7 @@
                                 <div class="caption">#1 {{tracks.0.title}}</div>
                                 {% if tracks.0 %}
                                 {% if tracks.0.album.cover_image %}
-                                <a href="{{tracks.0.get_absolute_url}}"><img src="{{tracks.0.album.cover_image.url}}" width="300px"></a>
+                                {% thumbnail tracks.0.album.cover_image "300" as im %}<a href="{{tracks.0.get_absolute_url}}"><img lt="{{tracks.0.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                 {% else %}
                                 <a href="{{tracks.0.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="300px"></a>
                                 {% endif %}
@@ -291,7 +292,7 @@
                                     <div class="caption-medium">#2 {{tracks.1.title}}</div>
                                     {% if tracks.1 %}
                                     {% if tracks.1.album.cover_image %}
-                                    <a href="{{tracks.1.get_absolute_url}}"><img src="{{tracks.1.album.cover_image.url}}" width="150px"></a>
+                                    {% thumbnail tracks.1.album.cover_image "150" as im %}<a href="{{tracks.1.get_absolute_url}}"><img lt="{{tracks.1.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.1.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
                                     {% endif %}
@@ -301,7 +302,7 @@
                                     <div class="caption-medium">#3 {{tracks.2.title}}</div>
                                     {% if tracks.2 %}
                                     {% if tracks.2.album.cover_image %}
-                                    <a href="{{tracks.2.get_absolute_url}}"><img src="{{tracks.2.album.cover_image.url}}" width="150px"></a>
+                                    {% thumbnail tracks.2.album.cover_image "150" as im %}<a href="{{tracks.2.get_absolute_url}}"><img lt="{{tracks.2.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.2.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
                                     {% endif %}
@@ -311,7 +312,7 @@
                                     <div class="caption-medium">#4 {{tracks.3.title}}</div>
                                     {% if tracks.3 %}
                                     {% if tracks.3.album.cover_image %}
-                                    <a href="{{tracks.3.get_absolute_url}}"><img src="{{tracks.3.album.cover_image.url}}" width="150px"></a>
+                                    {% thumbnail tracks.3.album.cover_image "150" as im %}<a href="{{tracks.3.get_absolute_url}}"><img lt="{{tracks.3.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.3.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
                                     {% endif %}
@@ -321,7 +322,7 @@
                                     <div class="caption-medium">#5 {{tracks.4.title}}</div>
                                     {% if tracks.4 %}
                                     {% if tracks.4.album.cover_image %}
-                                    <a href="{{tracks.4.get_absolute_url}}"><img src="{{tracks.4.album.cover_image.url}}" width="150px"></a>
+                                    {% thumbnail tracks.4.album.cover_image "150" as im %}<a href="{{tracks.4.get_absolute_url}}"><img lt="{{tracks.4.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.4.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
                                     {% endif %}
@@ -335,7 +336,7 @@
                                     <div class="caption-small">#6 {{tracks.5.title}}</div>
                                     {% if tracks.5 %}
                                     {% if tracks.5.album.cover_image %}
-                                    <a href="{{tracks.5.get_absolute_url}}"><img src="{{tracks.5.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.5.album.cover_image "100" as im %}<a href="{{tracks.5.get_absolute_url}}"><img lt="{{tracks.5.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.5.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -345,7 +346,7 @@
                                     <div class="caption-small">#7 {{tracks.6.title}}</div>
                                     {% if tracks.6 %}
                                     {% if tracks.6.album.cover_image %}
-                                    <a href="{{tracks.6.get_absolute_url}}"><img src="{{tracks.6.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.6.album.cover_image "100" as im %}<a href="{{tracks.6.get_absolute_url}}"><img lt="{{tracks.6.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.6.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -355,7 +356,7 @@
                                     <div class="caption-small">#8 {{tracks.7.title}}</div>
                                     {% if tracks.7 %}
                                     {% if tracks.7.album.cover_image %}
-                                    <a href="{{tracks.7.get_absolute_url}}"><img src="{{tracks.7.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.7.album.cover_image "100" as im %}<a href="{{tracks.7.get_absolute_url}}"><img lt="{{tracks.7.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.7.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -365,7 +366,7 @@
                                     <div class="caption-small">#9 {{tracks.8.title}}</div>
                                     {% if tracks.8 %}
                                     {% if tracks.8.album.cover_image %}
-                                    <a href="{{tracks.8.get_absolute_url}}"><img src="{{tracks.8.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.8.album.cover_image "100" as im %}<a href="{{tracks.8.get_absolute_url}}"><img lt="{{tracks.8.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.8.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -375,7 +376,7 @@
                                     <div class="caption-small">#10 {{tracks.9.title}}</div>
                                     {% if tracks.9 %}
                                     {% if tracks.9.album.cover_image %}
-                                    <a href="{{tracks.9.get_absolute_url}}"><img src="{{tracks.9.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.9.album.cover_image "100" as im %}<a href="{{tracks.9.get_absolute_url}}"><img lt="{{tracks.9.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.9.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -385,7 +386,7 @@
                                     <div class="caption-small">#11 {{tracks.10.title}}</div>
                                     {% if tracks.10 %}
                                     {% if tracks.10.album.cover_image %}
-                                    <a href="{{tracks.10.get_absolute_url}}"><img src="{{tracks.10.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.10.album.cover_image "100" as im %}<a href="{{tracks.10.get_absolute_url}}"><img lt="{{tracks.10.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.10.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -395,7 +396,7 @@
                                     <div class="caption-small">#12 {{tracks.11.title}}</div>
                                     {% if tracks.11 %}
                                     {% if tracks.11.album.cover_image %}
-                                    <a href="{{tracks.11.get_absolute_url}}"><img src="{{tracks.11.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.11.album.cover_image "100" as im %}<a href="{{tracks.11.get_absolute_url}}"><img lt="{{tracks.11.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.11.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -405,7 +406,7 @@
                                     <div class="caption-small">#13 {{tracks.12.title}}</div>
                                     {% if tracks.12 %}
                                     {% if tracks.12.album.cover_image %}
-                                    <a href="{{tracks.12.get_absolute_url}}"><img src="{{tracks.12.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.12.album.cover_image "100" as im %}<a href="{{tracks.12.get_absolute_url}}"><img lt="{{tracks.12.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.12.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -415,7 +416,7 @@
                                     <div class="caption-small">#14 {{tracks.13.title}}</div>
                                     {% if tracks.13 %}
                                     {% if tracks.13.album.cover_image %}
-                                    <a href="{{tracks.13.get_absolute_url}}"><img src="{{tracks.13.album.cover_image.url}}" width="100px"></a>
+                                    {% thumbnail tracks.13.album.cover_image "100" as im %}<a href="{{tracks.13.get_absolute_url}}"><img lt="{{tracks.13.name}}" src="{{im.url}}" width="{{im.width}}" height="{{im.height}}"></a>{% endthumbnail %}
                                     {% else %}
                                     <a href="{{tracks.13.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
                                     {% endif %}
@@ -471,7 +472,9 @@
                                 <tr>
                                     <td>{{scrobble.timestamp|naturaltime}}</td>
                                     {% if scrobble.track.album.cover_image %}
-                                    <td><a href="{{scrobble.track.album.get_absolute_url}}"><img src="{{scrobble.track.album.cover_image.url}}" width=25 height=25 style="border:1px solid black;" /></aa></td>
+                                    {% thumbnail scrobble.track.album.cover_image "25" as im %}
+                                    <td><a href="{{scrobble.track.album.get_absolute_url}}"><img src="{{im.url}}" width={{im.width}} height={{im.height}} style="border:1px solid black;" /></aa></td>
+                                    {% endthumbnail %}
                                     {% else %}
                                     <td><a href="{{scrobble.track.album.get_absolute_url}}">{{scrobble.track.album.name}}</a></td>
                                     {% endif %}
diff --git a/vrobbler/templates/videogames/videogame_detail.html b/vrobbler/templates/videogames/videogame_detail.html
index d15db67..17c1e05 100644
--- a/vrobbler/templates/videogames/videogame_detail.html
+++ b/vrobbler/templates/videogames/videogame_detail.html
@@ -2,6 +2,7 @@
 {% load mathfilters %}
 {% load static %}
 {% load naturalduration %}
+{% load thumbnail %}
 
 {% block title %}{{object.title}}{% endblock %}
 
@@ -30,7 +31,9 @@
 
 <div class="row">
     {% if object.hltb_cover%}
-    <div class="cover"><img src="{{object.hltb_cover.url}}" /></div>
+    {% thumbnail object.hltb_cover 400 as im %}
+    <div class="cover"><img src="{{im.url}}" /></div>
+    {% endthumbnail %}
     {% endif %}
     <div class="summary">
         {% if object.summary %}
diff --git a/vrobbler/templates/videos/video_detail.html b/vrobbler/templates/videos/video_detail.html
index 6aea189..05b186f 100644
--- a/vrobbler/templates/videos/video_detail.html
+++ b/vrobbler/templates/videos/video_detail.html
@@ -1,5 +1,6 @@
 {% extends "base_list.html" %}
 {% load static %}
+{% load thumbnail %}
 
 {% block title %}{{object.title}}{% endblock %}
 
@@ -57,7 +58,11 @@ dd {
 <div class="row header">
     <div class="cover image-wrapper">
         {% if object.imdb_rating %}<div class="caption">{{object.imdb_rating}}</div>{% endif %}
-        <img src="{% if object.cover_image %}{{object.cover_image.url}}{% else %}{% static 'images/no-video-cover.jpg' %}{% endif %}" width="400px" />
+        {% if object.cover_image %}
+        {% thumbnail object.cover_image 400 as im %}<img src="{{im.url}}" width="{{im.width}}" height="{{im.height}}" />{% endthumbnail %}
+        {% else %}
+        <img src="{% static 'images/no-video-cover.jpg' %}" width="400px" />
+        {% endif %}
         <div class="caption-footer">{{object.year}}{% if object.tv_series %} | <b>S</b>{{object.season_number}} <b>E</b>{{object.episode_number}}{% endif %}</div>
     </div>
     <div class="summary">