Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue


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 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.

Issue Analytics

  • State:open
  • Created 9 years ago
  • Comments:10 (7 by maintainers)

github_iconTop GitHub Comments

mx-mothcommented, Jan 27, 2015

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:

    '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 %}
    {% image item.image gallery-full as full %}
    <a href="{{ full.url }}">
        {% image item.image gallery-thumb %}
{% endfor %}
abossardcommented, Jan 30, 2015

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)…

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Resize an Image (Online or Offline) - WinBuzzer
Open your image, press the three dots in the toolbar, then click “Resize”.
Read more >
Top 5 Image Resizers of 2022: Online and Offline Options
1. Icecream Image Resizer – easy to use image resizer with GUI · Resize images in a bulk · Feature to add watermark...
Read more >
How to resize an image in HTML? -
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag....
Read more >
Quickly Resize Images With This Free Offline Tool - I Have A PC
Image Resizer is a free offline tool for resizing images. Here is how to use it.
Read more >
Dynamic image resizing. - javascript - Stack Overflow
As Guffa said, using the width and height attributes of the image tag just affects the way it is displayed by the browser....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found