Merge pull request #47 from Xpirix/optimize_page_loads

Optimize page load performance by managing thumbnails correctly

Author: Xpirix

django_project/changes/management/commands/generate_version_thumbnails.py

@@ -0,0 +1,51 @@
+# coding=utf-8
+"""Management command to backfill image_file_thumbnail for all Version records."""
+from django.core.management.base import BaseCommand
+from changes.models import Version
+
+
+class Command(BaseCommand):
+    help = (
+        'Generate image_file_thumbnail for every Version that has an '
+        'image_file but no thumbnail yet.  Pass --force to regenerate all '
+        'thumbnails even when one already exists.'
+    )
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            '--force',
+            action='store_true',
+            default=False,
+            help='Regenerate thumbnails even when image_file_thumbnail already exists.',
+        )
+
+    def handle(self, *args, **options):
+        force = options['force']
+        qs = Version.objects.exclude(image_file='')
+        if not force:
+            qs = qs.filter(image_file_thumbnail='')
+
+        total = qs.count()
+        if total == 0:
+            self.stdout.write(self.style.SUCCESS('Nothing to do — all thumbnails are up to date.'))
+            return
+
+        self.stdout.write(f'Generating thumbnails for {total} version(s)…')
+
+        ok = 0
+        failed = 0
+        for version in qs.iterator():
+            try:
+                version._generate_thumbnail()
+                ok += 1
+                self.stdout.write(f'  ✓  {version.name}  ({version.image_file.name})')
+            except Exception as exc:
+                failed += 1
+                self.stderr.write(
+                    self.style.ERROR(f'  ✗  {version.name}: {exc}')
+                )
+
+        summary = f'Done — {ok} generated'
+        if failed:
+            summary += f', {failed} failed'
+        self.stdout.write(self.style.SUCCESS(summary))

django_project/changes/migrations/0012_version_image_file_thumbnail.py

@@ -0,0 +1,21 @@
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('changes', '0011_auto_20200730_0531'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='version',
+            name='image_file_thumbnail',
+            field=models.ImageField(
+                blank=True,
+                editable=False,
+                help_text='Auto-generated 1000×500 WEBP thumbnail of image_file.',
+                upload_to='images/thumbnails/versions/',
+            ),
+        ),
+    ]

django_project/changes/models/version.py

@@ -4,6 +4,7 @@
 from common.utilities import version_slugify
 import os
 import logging
+from functools import cached_property
 from .entry import Entry
 from .sponsorship_period import SponsorshipPeriod
 from core.settings.contrib import STOP_WORDS
@@ -45,6 +46,12 @@ class Version(models.Model):
         upload_to=os.path.join(MEDIA_ROOT, 'images/projects'),
         blank=True)
 
+    image_file_thumbnail = models.ImageField(
+        help_text='Auto-generated 1000×500 WEBP thumbnail of image_file.',
+        upload_to='images/thumbnails/versions/',
+        blank=True,
+        editable=False)
+
     description = models.TextField(
         null=True,
         blank=True,
@@ -83,8 +90,83 @@ def save(self, *args, **kwargs):
             new_list = ' '.join(filtered_words)
             self.slug = version_slugify(new_list)[:50]
         self.padded_version = self.pad_name(str(self.get_numerical_name()))
+
+        # Detect whether image_file has changed so we know whether to
+        # regenerate the thumbnail after saving.
+        old_image_name = None
+        if self.pk:
+            try:
+                old_image_name = (
+                    Version.objects.filter(pk=self.pk)
+                    .values_list('image_file', flat=True)
+                    .first()
+                )
+            except Exception:
+                pass
+
         super(Version, self).save(*args, **kwargs)
 
+        # Regenerate thumbnail when image_file is set and has changed (or is
+        # new), or when a thumbnail is missing for an existing image.
+        if self.image_file:
+            needs_thumb = (
+                old_image_name != self.image_file.name or not self.image_file_thumbnail
+            )
+            if needs_thumb:
+                self._generate_thumbnail()
+
+    def _generate_thumbnail(self, width=1000, height=500):
+        """Generate a WEBP thumbnail and store it in image_file_thumbnail.
+
+        Uses centre-crop so the thumbnail always fills width×height without
+        distortion.  Saves directly via QuerySet.update() to avoid recursion.
+        """
+        from io import BytesIO
+        from PIL import Image as PILImage
+        from django.core.files.base import ContentFile
+
+        if not self.image_file:
+            return
+        try:
+            self.image_file.seek(0)
+            img = PILImage.open(self.image_file).convert('RGB')
+
+            # Centre-crop to the target aspect ratio before resizing.
+            src_ratio = img.width / img.height
+            dst_ratio = width / height
+            if src_ratio > dst_ratio:
+                # Image is wider — trim the sides.
+                new_w = int(img.height * dst_ratio)
+                left = (img.width - new_w) // 2
+                img = img.crop((left, 0, left + new_w, img.height))
+            elif src_ratio < dst_ratio:
+                # Image is taller — trim top and bottom.
+                new_h = int(img.width / dst_ratio)
+                top = (img.height - new_h) // 2
+                img = img.crop((0, top, img.width, top + new_h))
+
+            img = img.resize((width, height), PILImage.LANCZOS)
+
+            buf = BytesIO()
+            img.save(buf, format='WEBP', quality=85)
+            buf.seek(0)
+
+            base = os.path.splitext(os.path.basename(self.image_file.name))[0]
+            thumb_name = f'{base}_thumb.webp'
+
+            # save=False avoids an extra full model.save() / infinite loop.
+            self.image_file_thumbnail.save(
+                thumb_name, ContentFile(buf.read()), save=False
+            )
+            # Persist only the thumbnail field.
+            Version.objects.filter(pk=self.pk).update(
+                image_file_thumbnail=self.image_file_thumbnail.name
+            )
+        except Exception as e:
+            logger.warning(
+                'Could not generate thumbnail for Version pk=%s: %s', self.pk, e
+            )
+
     def get_numerical_name(self):
         name = self.name
         non_decimal = re.compile(r'[^\d.]+')
@@ -144,6 +226,7 @@ def _entries_for_category(self, category):
         qs = Entry.objects.filter(version=self, category=category)
         return qs
 
+    @cached_property
     def categories(self):
         """Get a list of categories where there are one or more entries.
 
@@ -156,20 +239,19 @@ def categories(self):
               {% endfor %}
               </ul>
             {% endfor %}
+
+        Uses a single DB query with select_related to avoid N+1 queries.
         """
-        qs = self.entries()
-        used = []
-        categories = []
-        for entry in qs:
-            category = entry.category
-            if category not in used:
-                row = {
-                    'category': category,
-                    'entries': self._entries_for_category(category)
-                }
-                categories.append(row)
-                used.append(category)
-        return categories
+        from itertools import groupby
+        qs = (
+            Entry.objects.filter(version=self)
+            .select_related('category', 'version')
+            .order_by('category__sort_number', 'sequence_number')
+        )
+        result = []
+        for category, entries in groupby(qs, key=lambda e: e.category):
+            result.append({'category': category, 'entries': list(entries)})
+        return result
 
     def sponsors(self):
         """Return a list of sponsors current at time of this version release.

django_project/changes/templates/entry/includes/entry_detail.html

@@ -1,5 +1,4 @@
 {% load custom_markup %}
-{% load thumbnail %}
 {% load embed_video_tags %}
 
 <div class="columns">
@@ -60,10 +59,13 @@ <h3><span>Feature:</span> {{ entry.title }}</h3>
     <div class="column is-4 has-text-centered">
             {% if entry.image_file|is_gif %}
                 {% if not rst_download %}
-                    <img id="{{ entry.image_file.url }}" class="image"
-                         data-gifffer="{{ entry.image_file.url }}"
-                         src="{{ entry.image_file.url }}"
-                         gifffer-alt="" loading="lazy"/>
+                    <div class="img-lazy-wrapper">
+                        <img id="{{ entry.image_file.url }}" class="image"
+                             data-gifffer="{{ entry.image_file.url }}"
+                             src="{{ entry.image_file.url }}"
+                             gifffer-alt="" loading="lazy"
+                             onload="this.closest('.img-lazy-wrapper').classList.add('loaded')"/>
+                    </div>
                     <a href="#" class="pop-gif">
                         Click here for bigger size animation.
                     </a>
@@ -75,11 +77,14 @@ <h3><span>Feature:</span> {{ entry.title }}</h3>
                     </a>
                 {% endif %}
             {% else %}
-                <a href="#" class="pop-image">
-                    {% thumbnail entry.image_file "1000x500" crop="center" format="WEBP" as im %}
-                        <img id="{{ entry.image_file.url }}" class="image is-rounded" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" loading="lazy">
-                    {% endthumbnail %}
-                </a>
+                <div class="img-lazy-wrapper">
+                    <a href="#" class="pop-image">
+                        <img id="{{ entry.image_file.url }}" class="image is-rounded"
+                             src="{{ entry.image_file.url }}"
+                             alt="Version image" loading="lazy"
+                             onload="this.closest('.img-lazy-wrapper').classList.add('loaded')">
+                    </a>
+                </div>
             {% endif %}
         </div>
     {% endif %}

django_project/changes/templates/version/detail-content.html

@@ -1,5 +1,4 @@
 {% load custom_markup %}
-{% load thumbnail %}
 
 {% if not rst_download %}
     <h1>
@@ -12,9 +11,12 @@ <h1>
     <div class="column">
         {% if not rst_download %}
         <a href="{{ version.image_file.url }}">
-                {% thumbnail version.image_file "1000x500" crop="center" format="WEBP" as im %}
-                    <img class="image is-rounded" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" loading="lazy">
-                {% endthumbnail %}
+                <div class="img-lazy-wrapper">
+                    <img class="image is-rounded"
+                         src="{% if version.image_file_thumbnail %}{{ version.image_file_thumbnail.url }}{% else %}{{ version.image_file.url }}{% endif %}"
+                         alt="Version image" loading="lazy"
+                         onload="this.closest('.img-lazy-wrapper').classList.add('loaded')">
+                </div>
             </a>
         {% else %}
             <img class="image is-rounded"
@@ -45,7 +47,7 @@ <h3 class="title is-4">
 {% for row in version.categories %}
     {% if row.entries %}
         <div class="buttons is-pulled-right">
-        {% if user.is_staff or user in project.changelog_manager.all and not rst_download %}
+        {% if user.is_staff or user in project.changelog_managers.all and not rst_download %}
             <a class="button is-light has-tooltip-bottom"
             data-tooltip="Order Entries"
             href='{% url "entry-order" version_pk=version.pk category_pk=row.category.pk %}'>

django_project/changes/templates/version/detail.html

@@ -11,6 +11,31 @@
 {% endblock js_head %}
 
 {% block extra_head %}
+<style>
+.img-lazy-wrapper {
+    position: relative;
+    background: linear-gradient(90deg, hsl(0,0%,93%) 25%, hsl(0,0%,88%) 50%, hsl(0,0%,93%) 75%);
+    background-size: 200% 100%;
+    animation: img-shimmer 1.5s ease-in-out infinite;
+    overflow: hidden;
+    border-radius: 6px;
+    min-height: 60px;
+}
+.img-lazy-wrapper img {
+    opacity: 0;
+}
+.img-lazy-wrapper.loaded {
+    background: none;
+    animation: none;
+}
+.img-lazy-wrapper.loaded img {
+    opacity: 1;
+}
+@keyframes img-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+</style>
 {% endblock %}
 
 {% block page_title %}
@@ -37,7 +62,7 @@ <h1>Entries (all)</h1>
         </a>
     {% endif %}
     {% if version.locked %}
-        {% if user.is_staff or user == version.project.owner or user in version.project.changelog_managers.all %}
+        {% if user.is_staff or user == version.project.owner or user in project.changelog_managers.all %}
             <a class="button is-light tooltip"
                data-tooltip="Unlock this version."
                onclick="$('#unlockModal').addClass('is-active')">
@@ -54,7 +79,7 @@ <h1>Entries (all)</h1>
             </a>
         {% endif %}
     {% else %}
-        {% if user.is_staff or user == version.project.owner or user in version.project.changelog_managers.all %}
+        {% if user.is_staff or user == version.project.owner or user in project.changelog_managers.all %}
             <a class="button is-light tooltip"
                data-tooltip="Lock this version."
                onclick="$('#lockModal').addClass('is-active')">

django_project/changes/templates/version/includes/version-list-rich-item.html

@@ -1,4 +1,4 @@
-{% load thumbnail static custom_markup %}
+{% load static custom_markup %}
 <div class="container rich has-right rounded mt-5" {% if version.url %}ondblclick="window.open('{{ version.url }}', '_blank');"{% endif %}>
     <div class="cont coloring-1">
         <h3 name="titlePreview">
@@ -34,9 +34,15 @@ <h3 name="titlePreview">
         </div>
     </div>
 
+    {% if version.image_file %}
     <div class="rich-right" name="imagePreview">
-        {% thumbnail version.image_file "400x200" crop="center" as im %}
-            <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="Version image" style="border-radius:10px;" loading="lazy">
-        {% endthumbnail %}
+        <div class="img-lazy-wrapper">
+            <img src="{% if version.image_file_thumbnail %}{{ version.image_file_thumbnail.url }}{% else %}{{ version.image_file.url }}{% endif %}"
+                 alt="Version image"
+                 style="border-radius:10px; width:100%; display:block;"
+                 loading="lazy"
+                 onload="this.closest('.img-lazy-wrapper').classList.add('loaded')">
+        </div>
     </div>
+    {% endif %}
 </div>