Nondeterministic Programming Methodology

    browsersync-images-middleware

    2.0.0 • Public • Published

    browsersync-images-middleware  GitHub last commit GitHub issues

    browser-sync development middleware to resize and transform local images (fake-CDN features)

    Install  npm

    npm i -D browsersync-images-middleware sharp
    

    Setup and features

    1. Wherever you use browser-sync, add the middleware option, like this:

          ...
          middleware: [{
            route: '/img',
            handle: require('browsersync-images-middleware')('public')
          }],
          ...
      
      • [img] Your chosen route. Can be anything, as long as you set your filter the same way.
      • [public] The root path of your images, probably your published/destination folder.
    2. and provide for your templates, a simple function, helper, filter, etc to mimic your favorite CDN's important features. With these parameters/options:

      • width w=200
      • height h=300
      • dpr (default 1) d=3
      • resize smart/fit (default smart) s=fit
      • force webp/avif/auto f=auto

      to build these (random) url:

      • /img/w=200,f=webp/image/somewhere/cat.jpg
      • /img/w=300,h=300/image/anotherpath/dog.png
      • /img/w=400,h=200,s=fit,f=auto/image/tree/bird.jpg

    Demos

    You can clone/download the github repository where you will find some demos.

    A handlebars™ demo here with its simpliest helper:

    Handlebars.registerHelper('cdn', (imagePath, options) => {
      const o = options.hash;
      return `/img/`
        + `w=${o.width}`
        + `${o.height ? ',h='+o.height : ''}`
        + `${o.force ? ',f='+o.force : ''}`
        + `${imagePath}`;
    });

    Or a Eleventy™ one there with a basic filter:

    eleventyConfig.addFilter('cdn', (imagePath, width, height, force) => {
      return `/img/`
        + `w=${width}`
        + `${height ? ',h='+height : ''}`
        + `${force ? ',f='+force : ''}`
        + `${imagePath}`;
    });

    CHANGELOG

    v2.0.0

    • BREAKING: sharp is now a peerDependency, you must install it seperately

    v1.0.0

    • Automatic smartcrop can now be changed to fit
    • WebP, AVIF and auto mode (Thanks to sharp)

    v0.4.x

    • Correction: URL is now "URI decoded"
    • Added png images

    v0.2.0

    v0.1.0

    • Initial upload

    Install

    npm i browsersync-images-middleware

    DownloadsWeekly Downloads

    2

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    7.34 kB

    Total Files

    4

    Last publish

    Collaborators

    • tigersway