django-progressiveimagefield

Progressive Image Model Field for Django

Requires:

Python 3.6+
Pillow 4.0+
Django 2.0+

The Problem: So, you have build a website (portfolio, news, eshop etc), you have optimized your static files (css, js, fonts, images) but still, the webpage loads quite slow due to lots of images being rendered (however, there might be other reasons, but right now, let’s focus on the image rendering).

The Solution: Based on José Manuel Pérez’s article about How Medium does progressive image loading, I have created a Django ModelField, which I called ProgressiveImageField. All it does is this: when an instance’s progressiveimagefield is created (saved, most commonly via the admin interface), it automatically creates a very small blurred thumbnail (maximum dimensions 10x10px) next to the original image. When this large image is rendered, the src attribute of the img element points to the thumbnail and not the large image. So, the user, initially, sees the blurred thumbnail. Behind the scenes, javascript takes place and gradually downloads the original image. Once the original image is downloaded, the blurred thumbnail is replaced through a nice-looking-CSS-fade effect. That’s all!

Installation

Install it using pip:

pip install django-progressiveimagefield
Add it to your INSTALLED_APPS inside your settings file:

INSTALLED_APPS += ['progressiveimagefield']

How to use

Inside your models.py, simply:

from django.db import models

from progressiveimagefield.fields import ProgressiveImageField

class MyModel(models.Model):
    # Other fields here
    img = ProgressiveImageField(upload_to="somewhere")

Inside your base.html template:

{% load static %}

<!DOCTYPE html>
<html>
    <head>
        <!-- other meta tags here etc -->
        <link rel="stylesheet" media="all" href="{% static 'progressiveimagefield/css/pif.css' %}">
    </head>
    <body>
        {% block content %}{% endblock %}
        <script src="{% static 'progressiveimagefield/js/pif.js' %}"></script>
    </body>
</html>

Finally, inside another HTML template where you want to render your image progressively, you have two options depending on which template engine is used to render your template:

Using the DTL (Django Template Language)

{% load progressive_tags %}

{% block content %}
    {% render_progressive_field instance.img %}
{% endblock %}

Using the Jinja2 Template Language

Add the filter inside the file (i.e jinja.py) where Jinja2 Environment is defined

from jinja2 import Environment

def environment(**options):
    env = Environment(**options)
    env.filters.update({
        'progressive': 'progressiveimagefield.jinja.progressive',
    })
    return env

Add the dotted path to the above function in your settings’s TEMPLATES setting OPTIONS dict as the value to the environment key. OK, here is the code:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.jinja2.Jinja2',
        'DIRS': # setting for DIRS here,
        'APP_DIRS': True,
        'OPTIONS': {
            'environment': 'path.to.jinja.environment.function',
        },
    },
    ...
]

Use it in your HTML template like this (just like a regular Django filter):
```
{% block content %}
    {{ instance.img|progressive }}
{% endblock %}
```

Testing

In order to test this application, you should

Clone the repo
Create a virtualenv (mkvirtualenv -p $(which python3.6) progressiveimagefield) and activate it (once created, it’ll be activated by default)
Install the requirements (pip install -r tests/test_requirements.txt)
Run python runtests.py

Release files for django-progressiveimagefield 0.1.5

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-progressiveimagefield 0.1.5
File	Size	Uploaded
django-progressiveimagefield-0.1.5.tar.gz	7.7 kB	Mar 10, 2019	Details

Built distribution (wheel)

Table of built distributions (wheels) for django-progressiveimagefield 0.1.5
File	Interpreter	ABI	Platform	Reset
django_progressiveimagefield-0.1.5-py3-none-any.whl 11.1 kB Mar 10, 2019	Python 3	none	any	Details

Total release size: 18.8 kB

Release files / django-progressiveimagefield-0.1.5.tar.gz

Download URL	django-progressiveimagefield-0.1.5.tar.gz
Size	7.7 kB
Tags	Source
SHA-256 checksum How to use checksums	`3ff8926854fd626848f79611ade8cd2e53b8745ce6d77d4fa98250c244e5d2f2`
BLAKE2b-256 checksum How to use checksums	`5029c4c92fbfa47af3b6b6569e38f6adc3b4ea9dbcefa87632a0a67c81922f2d`
Upload date	Mar 10, 2019
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`twine/1.11.0 pkginfo/1.4.2 requests/2.18.4 setuptools/38.4.0 requests-toolbelt/0.8.0 tqdm/4.19.5 CPython/3.6.3`

Release files / django_progressiveimagefield-0.1.5-py3-none-any.whl

Download URL	django_progressiveimagefield-0.1.5-py3-none-any.whl
Size	11.1 kB
Tags	Python 3
SHA-256 checksum How to use checksums	`3f37d4f040f7c13f69ab8e5ff184e01c8e43f8d940e23986ecb86f8be2ed60d7`
BLAKE2b-256 checksum How to use checksums	`744843a848a8d7b50e81c9f6abd9cdb7152c6399237636751076b453cae07830`
Upload date	Mar 10, 2019
Uploaded using Trusted Publishing? What is trusted publishing?	No
Uploaded via	`twine/1.11.0 pkginfo/1.4.2 requests/2.18.4 setuptools/38.4.0 requests-toolbelt/0.8.0 tqdm/4.19.5 CPython/3.6.3`