https://github.com/ptrck/wagtail-lazyimages

A wagtail plugin that generates tiny blurry placeholder images for lazy-loading
https://github.com/ptrck/wagtail-lazyimages

Last synced: 3 months ago
JSON representation

A wagtail plugin that generates tiny blurry placeholder images for lazy-loading

• Host: GitHub
• URL: https://github.com/ptrck/wagtail-lazyimages
• Owner: ptrck
• License: bsd-3-clause
• Created: 2019-09-08T16:45:48.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-06-03T07:52:10.000Z (over 3 years ago)
• Last Synced: 2024-04-25T12:44:08.318Z (9 months ago)
• Language: Python
• Size: 26.4 KB
• Stars: 23
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-wagtail - Wagtail-Lazyimages - A plugin that generates tiny blurry placeholder images for lazy loading Wagtail images medium.com style. (Apps / Media)

README

        

# Wagtail Lazy Images

Template tags that generate tiny blurry placeholder images alongside your wagtail images in order to lazy-load them medium.com style.

## Installing

Install using pip:

    ```

    pip install wagtail-lazyimages

    ```

## Usage

1. Add `wagtail_lazyimages` to your `INSTALLED_APPS` setting like this:

    ```

    INSTALLED_APPS = [

        ...

        'wagtail_lazyimages',

    ]

    ```

2. Load the `lazyimages_tags` template tag library in your template:

    ```

    {% load "lazyimages_tags" %}

    ```

3. Replace wagtail's `image` tag with `lazy_image` for images that should lazy load:

    ```

    {% lazy_image page.photo width-960 class="lazy" %}

    ```

    This template tag behaves just like wagtail's `image` tag with the exception that it generates an additional scaled down and blurred placeholder image. The URL of the placeholder image will appear in the `src` attribute of the image tag while the large version will be referenced in `data-src`:

    ```

    

    ```

4. In the front end: Implement the lazy loading functionality yourself or use a dedicated JavaScript library like [lozad.js](https://apoorv.pro/lozad.js):

    ```

    const observer = lozad('.lazy');

    observer.observe();

    ```

### Alternative attribute

If you want to use a different attribute for referencing the original image than `data-src` use the parameter `lazy_attr` for that:

    {% lazy_image page.photo width-960 lazy_attr="data-lazy-url" class="lazy" %}

### As syntax

If you need to assign the image data to a template variable using Django's `as` syntax, the URL of the placeholder image is stored in the `lazy_url` attribute:

    {% load "lazyimages_tags" %}

    {% lazy_image page.photo width-960 as img %}

    

### `attrs` shortcut

In case you need to use Wagtail's [`attrs shortcut`](https://docs.wagtail.io/en/stable/topics/images.html#the-attrs-shortcut) use `lazy_attrs` instead:

    {% load "lazyimages_tags" %}

    {% lazy_image page.photo width-960 as img %}