LazyLoader for contentstack-express
Table Of Contents
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 --> <!-- actual image -->
Inject Plugin
//config/staging.js or config/production.jsmoduleexports = 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 {engine;};
More details coming soon.
Todos
- Write Tests
- Add Code Comments
- Add suuport for images in static directory too.
License
MIT
Free Software, Hell Yeah!