Withlocals-cloudinary NPM

withlocals-cloudinary

Usage

Install via npm: npm install withlocals-cloudinary --save

Create a Cloudinary url

This is an example how Cloudinary.createCloudinaryUrl can be used:

var Cloudinary = require('withlocals-cloudinary').Cloudinary;
//...
render: function() {
  return (<img href={Cloudinary.createCloudinaryUrl(url, options)} />);
}
//...

This is an example how options can look like:

var options = {
  width: 200, // int - required
  height: 200, //int - required
  quality: 80, // int
  screenwidth: true, // boolean
  screenheight: true, // boolean
  gravity: 'faces', // string
  gravity2: 'center', // string
  crop: 'fill', // string
  flags: 'progressive', // string
  protocol: 'https://', // string
  radius: "20", // string
  border: "4px_solid_black", // string
  x: 200, // int
  y: 200, // int
  opacity: 80, // int
  background: "rgb:9090ff", // string
  e: 200, // int
  brightness: 80, // int
  saturation: 80, // int
  fetch_format: "auto" // string
}

options should at least have a width and height. For more info about the image transformations you can take a look at the Cloudinary documentation

Exta options, and global variables

For our personal use we added some extra options,

private_cdn : this changes your urls from https://res.cloudinary.com/withlocals-com/image/upload/w_200,h_200,c_fill,g_faces,q_60,f_auto/rcgqyevffk4w48z5tdw9 to https://withlocals-com-res.cloudinary.com/image/upload/w_200,h_200,c_fill,g_faces,q_60,f_auto/rcgqyevffk4w48z5tdw9. Which is used for advanced accounts with a private cdn which support ( today 2016 Feb.) HTTP/2
cdn_load_balance : for users that want to use subdomain load balancing, i.e. people without http2

All options that are stored in e.g. global.cloudinary_config = {quality:60} or window.cloudinary_config = {quality:60}, depending on your environment, will be taken into account. However they will be overriden by local settings.

React component with a Cloudinary image

This is an example how <CloudinaryImage /> can be used:

var CloudinaryImage = require('withlocals-cloudinary').CloudinaryImage;

//...
render: function() {
  return (<CloudinaryImage
              src={url}
              height={height}
              width={width}
              thumbnail={thumbnail}
              alt={alt} />);
}
//...

src, width and height are required. thumbnail and alt are optional.

Lazy load content

This is an example how <LazyLoad /> can be used:

var LazyLoad = require('withlocals-cloudinary').LazyLoad;

//...
render: function() {
  return (<LazyLoad
              height={height}
              preLoadSize={preLoadSize}>
              //...
          </LazyLoad>);
}  
//...

Lazy load a Cloudinary Image

This is an example how <LazyCloudinaryImage /> can be used:

var LazyCloudinaryImage = require('withlocals-cloudinary').LazyCloudinaryImage;

//...
render: function() {
  return (<LazyCloudinaryImage
              src={url}
              height={height}
              width={width} />);
}  
//...