Merge pull request #1164 from thunderstore-io/improve-thumbnail-handling

MythicManiac · web-flow · commit f00cc1dffaab · 2026-02-09T16:04:22.000+02:00
Improve thumbnail handling(TS-2541)
diff --git a/django/thunderstore/community/templates/community/community_list.html b/django/thunderstore/community/templates/community/community_list.html
@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% load cache %}
-{% load thumbnail %}
+{% load cached_thumbnail %}
 
 {% block title %}All communities{% endblock %}
 
@@ -18,7 +18,7 @@ <h3 class="col-12 mt-4">All communities</h3>
                 <div class="p-0 bg-light">
                     <a href="{{ object.full_url }}">
                         {% if object.cover_image %}
-                        <img class="w-100" src="{% thumbnail object.cover_image 360x480 crop %}" alt="{{ object.name }} icon">
+                        <img class="w-100" src="{% thumbnail_url object.cover_image 360 480 %}" alt="{{ object.name }} icon">
                         {% else %}
                         <img class="w-100" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAHgAQMAAACyyGUjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAADUExURSMfNp+RXmQAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAtSURBVHja7cExAQAAAMKg9U9tDQ8gAAAAAAAAAAAAAAAAAAAAAAAAAAAADtUAVkAAAQ2c1aEAAAAASUVORK5CYII=" alt="{{ object.name }} icon">
                         {% endif %}
diff --git a/django/thunderstore/community/templates/community/includes/package_header.html b/django/thunderstore/community/templates/community/includes/package_header.html
@@ -1,8 +1,8 @@
-{% load thumbnail %}
+{% load cached_thumbnail %}
 
 <div class="card-header">
     <div class="media">
-        <img class="align-self-center mr-3" src="{% thumbnail object.package.icon 128x128 %}" alt="{{ object.package }} icon">
+        <img class="align-self-center mr-3" src="{% thumbnail_url object.package.icon 128 128 %}" alt="{{ object.package }} icon">
         <div class="media-body">
             <h1 class="mt-0">{{ object.package.display_name }}</h1>
             <p>{{ object.package.description }}</p>
diff --git a/django/thunderstore/community/templates/community/packagelisting_changelog.html b/django/thunderstore/community/templates/community/packagelisting_changelog.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% load thumbnail %}
+{% load cached_thumbnail %}
 {% load markdownify %}
 {% load cache_until %}
 {% load community_url %}
@@ -11,7 +11,7 @@
     <meta property="og:title" content="{{ object.package.display_name }} changelog" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="{{ request.build_absolute_uri }}" />
-    <meta property="og:image" content="{% thumbnail object.package.icon 256x256 %}" />
+    <meta property="og:image" content="{% thumbnail_url object.package.icon 256 256 %}" />
     <meta property="og:image:width" content="256" />
     <meta property="og:image:height" content="256" />
 
diff --git a/django/thunderstore/community/templates/community/packagelisting_detail.html b/django/thunderstore/community/templates/community/packagelisting_detail.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% load thumbnail %}
+{% load cached_thumbnail %}
 {% load arrow %}
 {% load markdownify %}
 {% load cache_until %}
@@ -13,7 +13,7 @@
 <meta property="og:title" content="{{ object.package.display_name }} v{{ object.package.version_number }}" />
 <meta property="og:type" content="website" />
 <meta property="og:url" content="{{ request.build_absolute_uri }}" />
-<meta property="og:image" content="{% thumbnail object.package.icon 256x256 %}" />
+<meta property="og:image" content="{% thumbnail_url object.package.icon 256 256 %}" />
 <meta property="og:image:width" content="256" />
 <meta property="og:image:height" content="256" />
 
diff --git a/django/thunderstore/community/templates/community/packagelisting_list.html b/django/thunderstore/community/templates/community/packagelisting_list.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% load thumbnail %}
+{% load cached_thumbnail %}
 {% load arrow %}
 {% load cache_until %}
 {% load qurl %}
@@ -160,7 +160,7 @@ <h3 class="col-12 mt-4">{{ page_title }}</h3>
                 </div>
                 {% endif %}
                 <a href="{{ object.get_full_url }}">
-                    <img class="w-100" src="{% thumbnail object.package.icon 256x256 crop %}" alt="{{ object.package }} icon">
+                    <img class="w-100" src="{% thumbnail_url object.package.icon 256 256 %}" alt="{{ object.package }} icon">
                 </a>
             </div>
             <div class="bg-light p-2">
diff --git a/django/thunderstore/community/templates/community/packagelisting_versions.html b/django/thunderstore/community/templates/community/packagelisting_versions.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% load thumbnail %}
+{% load cached_thumbnail %}
 {% load cache_until %}
 {% load community_url %}
 
@@ -10,7 +10,7 @@
     <meta property="og:title" content="{{ object.package.display_name }} version history" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="{{ request.build_absolute_uri }}" />
-    <meta property="og:image" content="{% thumbnail object.package.icon 256x256 %}" />
+    <meta property="og:image" content="{% thumbnail_url object.package.icon 256 256 %}" />
     <meta property="og:image:width" content="256" />
     <meta property="og:image:height" content="256" />
 
diff --git a/django/thunderstore/core/urls.py b/django/thunderstore/core/urls.py
@@ -12,6 +12,7 @@
 from thunderstore.frontend.views import (
     ManifestV1ValidatorView,
     MarkdownPreviewView,
+    ThumbnailServeView,
     ads_txt_view,
     robots_txt_view,
 )
@@ -56,6 +57,11 @@
         name="tools.manifest-v1-validator",
     ),
     path("legal/", include((legal_urls, "contracts"), namespace="contracts")),
+    path(
+        "thumbnail-serve/<path:path>/",
+        ThumbnailServeView.as_view(),
+        name="cdn_thumb_serve",
+    ),
 ]
 
 schema_view = get_schema_view(
diff --git a/django/thunderstore/frontend/services/__init__.py b/django/thunderstore/frontend/services/__init__.py
diff --git a/django/thunderstore/frontend/services/thumbnail.py b/django/thunderstore/frontend/services/thumbnail.py
@@ -0,0 +1,37 @@
+from dataclasses import dataclass
+from typing import Optional
+
+from django.conf import settings
+from easy_thumbnails.files import get_thumbnailer
+
+from thunderstore.core.utils import capture_exception
+
+
+@dataclass
+class Thumbnail:
+    storage_path: Optional[str] = None
+    url: Optional[str] = None
+
+
+def get_or_create_thumbnail(
+    asset_path: str, width: int, height: int
+) -> Optional[Thumbnail]:
+    try:
+        thumbnailer = get_thumbnailer(asset_path)
+
+        thumbnail_options = {
+            "size": (width, height),
+            "crop": True,
+            "quality": settings.THUMBNAIL_QUALITY,
+        }
+
+        thumbnail_name = thumbnailer.get_thumbnail_name(thumbnail_options)
+        if thumbnailer.source_storage.exists(thumbnail_name):
+            url = thumbnailer.source_storage.url(thumbnail_name)
+            return Thumbnail(storage_path=thumbnail_name, url=url)
+        else:
+            thumbnail = thumbnailer.get_thumbnail(thumbnail_options, generate=True)
+            return Thumbnail(storage_path=thumbnail.name, url=thumbnail.url)
+    except Exception as e:
+        capture_exception(e)
+        return None
diff --git a/django/thunderstore/frontend/templatetags/cached_thumbnail.py b/django/thunderstore/frontend/templatetags/cached_thumbnail.py
@@ -0,0 +1,17 @@
+from django import template
+from django.urls import reverse
+
+register = template.Library()
+
+
+@register.simple_tag
+def thumbnail_url(image_field, width: int, height: int) -> str:
+    if not image_field:
+        return ""
+
+    url = (
+        reverse("cdn_thumb_serve", kwargs={"path": image_field.name})
+        + f"?width={width}&height={height}"
+    )
+
+    return url
diff --git a/django/thunderstore/frontend/tests/services/__init__.py b/django/thunderstore/frontend/tests/services/__init__.py
diff --git a/django/thunderstore/frontend/tests/services/test_thumbnail_service.py b/django/thunderstore/frontend/tests/services/test_thumbnail_service.py
@@ -0,0 +1,67 @@
+from unittest.mock import patch
+
+import pytest
+from django.conf import settings
+
+from thunderstore.frontend.services.thumbnail import get_or_create_thumbnail
+
+
+@pytest.mark.django_db
+def test_get_or_create_thumbnail_success(community, dummy_cover_image):
+    community.cover_image = dummy_cover_image
+    community.save()
+
+    asset_path = community.cover_image.name
+    width, height = 100, 100
+    thumbnail = get_or_create_thumbnail(asset_path, width, height)
+    thumbnail_url = thumbnail.url
+
+    assert thumbnail_url is not None
+    assert f"q{settings.THUMBNAIL_QUALITY}_crop" in thumbnail_url
+    assert thumbnail_url.endswith(".jpg")
+
+
+@pytest.mark.django_db
+def test_get_or_create_thumbnail_exception(community, dummy_cover_image, settings):
+    settings.ALWAYS_RAISE_EXCEPTIONS = False
+    community.cover_image = dummy_cover_image
+    community.save()
+
+    asset_path = community.cover_image.name
+    width, height = 100, 100
+
+    path = "thunderstore.frontend.services.thumbnail.get_thumbnailer"
+    with patch(path, side_effect=Exception("Test Exception")):
+        thumbnail_url = get_or_create_thumbnail(asset_path, width, height)
+
+    assert thumbnail_url is None
+
+
+@pytest.mark.django_db
+@pytest.mark.parametrize("thumbnail_exists", (False, True))
+def test_get_or_create_thumbnail_behavior(
+    community, dummy_cover_image, thumbnail_exists
+):
+    community.cover_image = dummy_cover_image
+    community.save()
+
+    asset_path = community.cover_image.name
+    width, height = 100, 100
+
+    options = {
+        "size": (width, height),
+        "crop": True,
+        "quality": settings.THUMBNAIL_QUALITY,
+    }
+
+    # Create the thumbnail if it should exist
+    if thumbnail_exists:
+        get_or_create_thumbnail(asset_path, width, height)
+
+    path = "easy_thumbnails.files.Thumbnailer.get_thumbnail"
+    with patch(path) as mock_get_thumbnailer:
+        get_or_create_thumbnail(asset_path, width, height)
+        if thumbnail_exists:
+            mock_get_thumbnailer.assert_not_called()
+        else:
+            mock_get_thumbnailer.assert_called_once_with(options, generate=True)
diff --git a/django/thunderstore/frontend/tests/test_views.py b/django/thunderstore/frontend/tests/test_views.py
@@ -1,3 +1,5 @@
+from unittest.mock import patch
+
 import pytest
 from django.urls import reverse
 from rest_framework.test import APIClient
@@ -130,3 +132,60 @@ def test_views_disabled_for_auth_exclusive_host(
         HTTP_HOST=community_site.site.domain,
     )
     assert response.status_code == 302
+
+
+@pytest.mark.django_db
+def test_thumbnail_serve_success(dummy_cover_image, client, community_site):
+    community = community_site.community
+    community.cover_image = dummy_cover_image
+    community.save()
+
+    url = reverse("cdn_thumb_serve", kwargs={"path": community.cover_image.name})
+    params = {"width": 64, "height": 64}
+
+    response = client.get(url, params, HTTP_HOST=community_site.site.domain)
+    assert response.status_code == 200
+    assert response.get("Content-Type") == "image/jpeg"
+    assert response.get("Cache-Control") == "max-age=86400, public"
+    assert response.get("Content-Disposition").startswith("inline; filename=")
+
+
+@pytest.mark.django_db
+@pytest.mark.parametrize(
+    "params",
+    [
+        {"width": "abc", "height": "100"},
+        {"width": "100", "height": "abc"},
+        {"width": "0", "height": "100"},
+        {"width": "100", "height": "0"},
+        {"width": "-1", "height": "100"},
+        {"width": "0", "height": "0"},
+        {},
+    ],
+)
+@pytest.mark.django_db
+def test_thumbnail_serve_exception(params, dummy_cover_image, client, community_site):
+    community = community_site.community
+    community.cover_image = dummy_cover_image
+    community.save()
+
+    url = reverse("cdn_thumb_serve", kwargs={"path": community.cover_image.name})
+
+    response = client.get(url, params, HTTP_HOST=community_site.site.domain)
+    assert response.status_code == 403
+    assert response.get("Cache-Control") == "max-age=300, public"
+
+
+@pytest.mark.django_db
+def test_thumbnail_serve_invalid(client, community_site, settings):
+    settings.ALWAYS_RAISE_EXCEPTIONS = False
+    community = community_site.community
+    community.cover_image = None
+    community.save()
+
+    url = reverse("cdn_thumb_serve", kwargs={"path": community.cover_image.name})
+    params = {"width": 64, "height": 64}
+
+    response = client.get(url, params, HTTP_HOST=community_site.site.domain)
+    assert response.status_code == 404
+    assert response.get("Cache-Control") == "max-age=300, public"
diff --git a/django/thunderstore/frontend/views.py b/django/thunderstore/frontend/views.py
@@ -1,11 +1,18 @@
+import mimetypes
 from typing import Any, Dict
 
 from django.conf import settings
+from django.core.exceptions import PermissionDenied
+from django.core.files.storage import default_storage
+from django.http import FileResponse, HttpResponseForbidden, HttpResponseNotFound
 from django.shortcuts import render
+from django.utils.cache import patch_cache_control
 from django.utils.decorators import method_decorator
 from django.views.decorators.csrf import ensure_csrf_cookie
-from django.views.generic import TemplateView
+from django.views.generic import TemplateView, View
 
+from thunderstore.core.utils import capture_exception
+from thunderstore.frontend.services.thumbnail import get_or_create_thumbnail
 from thunderstore.plugins.registry import plugin_registry
 
 
@@ -49,3 +56,47 @@ def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
         context = super().get_context_data(**kwargs)
         context["setting_links"] = plugin_registry.get_settings_links()
         return context
+
+
+ALLOWED_DIMENSIONS = (64, 128, 256, 360, 480)
+
+
+class ThumbnailServeView(View):
+    def get(self, request, *args, **kwargs):
+        asset_path = self.kwargs.get("path")
+
+        try:
+            width = int(request.GET.get("width", 0))
+            height = int(request.GET.get("height", 0))
+        except (ValueError, TypeError):
+            width, height = 0, 0
+
+        max_age = 300  # 5 minutes
+
+        # This is a check to prevent potential malicious enumeration of
+        # thumbnail sizes to flood the storage / server.
+        if width not in ALLOWED_DIMENSIONS or height not in ALLOWED_DIMENSIONS:
+            response = HttpResponseForbidden("Invalid thumbnail settings.")
+            patch_cache_control(response, max_age=max_age, public=True)
+            return response
+
+        if not asset_path:
+            response = HttpResponseNotFound("Thumbnail not found.")
+        else:
+            thumbnail = get_or_create_thumbnail(asset_path, width, height)
+            thumbnail_path = thumbnail.storage_path if thumbnail else None
+
+            if thumbnail_path:
+                try:
+                    mime_type, _ = mimetypes.guess_type(thumbnail_path)
+                    file = default_storage.open(thumbnail_path, "rb")
+                    response = FileResponse(file, content_type=mime_type)
+                    max_age = 86400  # 24h
+                except FileNotFoundError as e:
+                    capture_exception(e)
+                    response = HttpResponseNotFound("Thumbnail not found.")
+            else:
+                response = HttpResponseNotFound("Invalid request.")
+
+        patch_cache_control(response, max_age=max_age, public=True)
+        return response
diff --git a/django/thunderstore/repository/templates/repository/includes/dependencies.html b/django/thunderstore/repository/templates/repository/includes/dependencies.html
@@ -1,4 +1,4 @@
-{% load thumbnail %}
+{% load cached_thumbnail %}
 {% load community_url %}
 
 <div class="card">
@@ -10,7 +10,7 @@ <h4>This mod requires the following mods to function</h4>
             {% for dependency in object.package.dependencies.all %}
                 <div class="list-group-item flex-column align-items-start media">
                     <div class="media">
-                        <img class="align-self-center mr-3" src="{% thumbnail dependency.icon 64x64 %}" alt="{{ dependency }} icon">
+                        <img class="align-self-center mr-3" src="{% thumbnail_url dependency.icon 64 64 %}" alt="{{ dependency }} icon">
                         <div class="media-body">
                             <h5 class="mt-0">
                                 <a href="{% community_url "packages.detail" owner=dependency.package.namespace.name name=dependency.package.name %}">
diff --git a/django/thunderstore/repository/templates/repository/packageversion_detail.html b/django/thunderstore/repository/templates/repository/packageversion_detail.html
diff --git a/python-packages b/python-packages
