lazyImages Plugin

Overview

scully-plugin-lazy-images is a postRenderer plugin for Scully turning your images into lazy loading images using lazyload. This will replace the src attribute with data-src and adds the class lazyload to the img tag.

A browser native approach would be to use loading="lazy" for each img tag. When it has broader browser support we will switch to the native approach.

Installation

To install this plugin with npm run:

Copy$ npm install @notiz/scully-plugin-lazy-images --save-dev

Usage

Add the plugin to the defaultPostRenderers in your scully.config:

Copyrequire('@notiz/scully-plugin-lazy-images');

exports.config = {
  projectRoot: './src/app',
  defaultPostRenderers: ['lazyImages'],
  routes: {},
};

If you want to use the plugin for a specific route do:

Copyrequire('@notiz/scully-plugin-lazy-images');

exports.config = {
  ...
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './content/blog'
      },
      postRenderers: ['lazyImages']
    }
  }
  ...
};