Load thumbnails in small, delayed chunks

and limit the gallery to 2,500 images. Fixes #555
kobotoolbox · May 21, 2019 · 4cee734 · 4cee734
1 parent dc8a56a
commit 4cee734
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/onadata/apps/main/templates/form_photos.html b/onadata/apps/main/templates/form_photos.html
@@ -8,16 +8,11 @@
 
 {% block body %}
 {% load i18n %}
+{% load l10n %}
 <body>
     {% include "topbar.html" %}
     {% if images|length %}
-        <div id="gallery">
-        {% for image_url in images %}
-            <a href="{{ image_url.large }}">
-                <img longdesc={{ image_url.original }} src="{{ image_url.small }}" alt="{{ image_url.original }}">
-            </a>
-        {% endfor %}
-        </div>
+        <div id="gallery"></div>
     {% else %}
         <div style="text-align:center;">
             {% trans "There are no photos in this project." %}
@@ -30,16 +25,39 @@
     <script type="text/javascript" src="{{STATIC_URL}}galleria/galleria-1.2.8.min.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}galleria/themes/classic/galleria.classic.min.js"></script>
     <script type="text/javascript">
+        var galleryData = [
+        {% for image_url in images %}
+            {
+                thumb: '{{ image_url.small }}',
+                image: '{{ image_url.large }}',
+                link: '{{ image_url.original }}'
+            }{% if not forloop.last %},{% endif %}
+        {% endfor %}
+        ];
         // Load the classic theme
         // Galleria.loadTheme('{{STATIC_URL}}galleria/themes/classic/galleria.classic.min.js');
         Galleria.configure({
+            thumbnails: 'lazy',
             transition: 'fade',
             lightbox: false,
             popupLinks: true,
             showInfo: true
         });
         // Initialize Galleria
-        Galleria.run('#gallery');
+        Galleria.run('#gallery', {dataSource: galleryData})
+        Galleria.ready(function(options) {
+            this.lazyLoadChunks(
+                {# `unlocalize` gets rid of that pesky thousand separator #}
+                {{ thumbnail_chunk_size|unlocalize }},
+                {{ thumbnail_chunk_delay|unlocalize }}
+            );
+            {% if too_many_images %}
+            Galleria.raise(
+                "{%trans "This project has too many photos to display in this gallery. Only the latest ___ are shown." %}".replace(
+                    "___", "{{ images|length }}")
+            );
+            {% endif %}
+        });
     </script>
 {% endif %}
 {% endblock %}

diff --git a/onadata/apps/main/views.py b/onadata/apps/main/views.py
@@ -1053,6 +1053,10 @@ def download_media_data(request, username, id_string, data_id):
 
 
 def form_photos(request, username, id_string):
+    GALLERY_IMAGE_COUNT_LIMIT = 2500
+    GALLERY_THUMBNAIL_CHUNK_SIZE = 25
+    GALLERY_THUMBNAIL_CHUNK_DELAY = 5000 # ms
+
     xform, owner = check_and_set_user_and_form(username, id_string, request)
 
     if not xform:
@@ -1063,9 +1067,16 @@ def form_photos(request, username, id_string):
     data['content_user'] = owner
     data['xform'] = xform
     image_urls = []
-
-    for instance in xform.instances.all():
-        for attachment in instance.attachments.all():
+    too_many_images = False
+
+    # Show the most recent images first
+    for instance in xform.instances.all().order_by('-pk'):
+        attachments = instance.attachments.all()
+        # If we have to truncate, don't include a partial instance
+        if len(image_urls) + attachments.count() > GALLERY_IMAGE_COUNT_LIMIT:
+            too_many_images = True
+            break
+        for attachment in attachments:
             # skip if not image e.g video or file
             if not attachment.mimetype.startswith('image'):
                 continue
@@ -1080,6 +1091,9 @@ def form_photos(request, username, id_string):
             image_urls.append(data)
 
     data['images'] = image_urls
+    data['too_many_images'] = too_many_images
+    data['thumbnail_chunk_size'] = GALLERY_THUMBNAIL_CHUNK_SIZE
+    data['thumbnail_chunk_delay'] = GALLERY_THUMBNAIL_CHUNK_DELAY
     data['profilei'], created = UserProfile.objects.get_or_create(user=owner)
 
     return render(request, 'form_photos.html', data)