"Offline" resizing of images used by the {% image %} tag

Problem

Images are resized during the request processing, if they do not exist yet. I’m currently having issues with this. Imagine users upload a batch of images, which are shown publicly in a grid. During the rendering of that grid, all those images need to be resized on the fly. If you are working with a slow file backend (e.g. Amazon S3), the resulting loading time isn’t acceptable.

Proposal 1

Have a manage.py command which:

• parses all templates for {% image %} tags to get required sizes
• resize all images and store them to the file backend

This command would be executed manually.

Proposal 2

Do required resizing during the upload of an image. It would probably be necessary to specify required image sizes beforehand.

[mx-moth]

I like proposal 2, resizing images during upload. If a list of common image sizes/filters was defined in the settings, the images could be processed through these filters ready for use in the rest of the site. Additionally, if these predefined filters were given a name, they could be used as a filter spec, keeping templates DRY:

# settings.py
WAGTAILIMAGES_PREDEFINED_FILTERS = {
    'header': 'min-600x300',
    'gallery-thumb': 'fill-200x200',
    'gallery-full': 'max-1024x768',
}

{# page.html #}
{% load wagtailcore_tags wagtailimages_tags %}

<h1>{{ self.title }}</h1>
{% image self.header header %}
{{ self.body|richtext }}

{% for item in self.gallery %}
    {% image item.image gallery-full as full %}
    <a href="{{ full.url }}">
        {% image item.image gallery-thumb %}
    </a>
{% endfor %}

[abossard]

Just another thought:

What about setting a custom Image Model with the settings.WAGTAILIMAGES_IMAGE_MODEL and in that CustomImage class, override get_rendition, and when the proper rendition does not exist yet, start a celery that executes the original get_rendition method. And return the original image in the meanwhile (ok, maybe that screws the layout a bit)…