LazyLoader for contentstack-express

Table Of Contents

• Installation
• Native Libraries
• Usage
• Inject Plugin
• Demo
• Points To Be Remembered
• Todos

Version

1.0.1

Google Alike Image Utility Plugin for showing the image related background color till the image is been loaded properly. Lazyloader is contentstack-express plugin developed for better user experience on website. This plugin will automatically predict the dominant color used in your image and set a background color till the image has been loaded completely same as Google does it for its Images.

Installation

LazyLoader requires Node.js v4+ to run.

Download and extract the latest pre-built release.

Install the native dependencies for Linux system before using the plugin and start the server.

Native Libraries

$ sudo apt-get install libcairo2-dev libjpeg-dev libgif-dev libpango1.0-dev
$ cd your_cms_project/plugins
$ npm install lazyloader-cmsplugin --save

Usage Instructions

 <!-- Just Add the filter name suffic your image url -->
 <div class="image-wrapper" {{getAssetUrl(imagepath) | imagecolor}}>
  <!-- actual image -->
  <img src={{getAssetUrl(imagepath)}} alt="image1">
 </div>

Inject Plugin

//config/staging.js or config/production.js
module.exports = exports = {
    "theme": "basic",
    "storage": {
     ...
     ...
    }
    "plugins":{
      "lazyloader-cmsplugin":{}
    }
}

Demo

You can visit the site of Built.io for Implementation Demo.

Some Points to be Remembered

• Some of the native libraries mentioned above may not be supported in Windows System and your npm install may be failed.
• As you may included the above nunjucks filter in markup so it would expect the filter to be existed in one of your plugins.
• Plugin expect you to have your content folder in staging and production environment level as per the standards.
• Plugin Doesn't support functionality for static image files in your public directory will be available in furutre release.

Snippet Example For Point number 2

   ViewHelper.templateExtends = function(engine) {
    engine.getEnvironment().addFilter("imagecolor", function(url) {
          return "";
      });
   };

More details coming soon.

Todos

• Write Tests
• Add Code Comments
• Add suuport for images in static directory too.

License

MIT

Free Software, Hell Yeah!