feat: global default parameters

README.md

@@ -27,6 +27,7 @@ Responsive images in the browser, simplified. Pure JavaScript with zero dependen
   * [Custom input attributes](#custom-input-attributes)
   * [Null output attributes](#null-output-attributes)
   * [Base-64 encoded parameters](#base-64-encoded-parameters)
+  * [Default Parameters](#default-parameters)
   * [What is the `ixlib` param?](#what-is-the-ixlib-param)
 * [Browser Support](#browser-support)
 * [Meta](#meta)
@@ -353,6 +354,28 @@ When providing a URL with parameters to imgix.js via the `ix-src` attribute, not
 >
 ```
 
+<a name="default-parameters"></a>
+### Default parameters
+
+If the same parameters are being used again and again, they can be extracted out into a global config using `imgix.defaultParameters`. These settings will become the default paramters for each imgix tag globally, before any specific params are loaded from `ix-params` or `ix-src`
+
+```js
+// setup
+imgix.config.defaultParams = {
+	auto: 'format,compress',
+	fit: 'crop'
+}
+
+// later
+<img
+  ix-path="hero.png"
+  ix-params='{"fit":"clip"}'
+>
+
+// becomes
+<img src=".../hero.png?auto=format,compress&fit=clip">
+
+```
 
 <a name="what-is-the-ixlib-param"></a>
 ### What is the `ixlib` param?

spec/ImgixTagSpec.js

@@ -251,6 +251,33 @@ describe('ImgixTag', function() {
         txt64: 'SSBjYW5uw7h0IGJlbMOuw6l24oiRIGl0IHdvcu-jv3MhIPCfmLE'
       });
     });
+
+    it('uses global parameters', function() {
+      var mock = new global.MockElement();
+      mock['ix-path'] = 'path';
+      var tag = new ImgixTag(mock, global.imgix.config);
+      global.imgix.config.defaultParams = {
+        auto: 'format,compress'
+      };
+
+      expect(tag._extractBaseParams()).toEqual({
+        auto: 'format,compress'
+      });
+    });
+    it('ix-params overrides global parameters', function() {
+      var mock = new global.MockElement();
+      mock['ix-path'] = 'path';
+      mock['ix-params'] = '{"auto": "format"}';
+
+      var tag = new ImgixTag(mock, global.imgix.config);
+      global.imgix.config.defaultParams = {
+        auto: 'format,compress'
+      };
+
+      expect(tag._extractBaseParams()).toEqual({
+        auto: 'format'
+      });
+    });
   });
 
   it('includes the `ixlib` parameter when `imgix.config.includeLibraryParam` is `true`', function() {

src/ImgixTag.js

@@ -49,10 +49,18 @@ var ImgixTag = (function() {
   }
 
   ImgixTag.prototype._extractBaseParams = function() {
-    var params;
+    var params = {};
+
+    if (
+      this.settings.defaultParams &&
+      typeof this.settings.defaultParams === 'object' &&
+      this.settings.defaultParams !== null
+    ) {
+      params = Object.assign({}, this.settings.defaultParams);
+    }
 
     if (this.ixPathVal) {
-      params = JSON.parse(this.ixParamsVal) || {};
+      params = Object.assign({}, params, JSON.parse(this.ixParamsVal) || {});
 
       // Encode any passed Base64 variant params
       for (var key in params) {
@@ -65,8 +73,6 @@ var ImgixTag = (function() {
       // from that string URL.
       var lastQuestion = this.ixSrcVal.lastIndexOf('?');
 
-      params = {};
-
       if (lastQuestion > -1) {
         var paramString = this.ixSrcVal.substr(lastQuestion + 1),
           splitParams = paramString.split('&');

src/defaultConfig.js

@@ -3,6 +3,7 @@ module.exports = {
   host: null,
   useHttps: true,
   includeLibraryParam: true,
+  defaultParams: {},
 
   // Output element attributes
   srcAttribute: 'src',

src/imgix.js

@@ -54,9 +54,12 @@ util.domReady(function() {
     var metaTagValue = getMetaTagValue(key);
 
     if (typeof metaTagValue !== 'undefined') {
+      const defaultConfigType = typeof defaultConfig[key];
       // Only allow boolean values for boolean configs
-      if (typeof defaultConfig[key] === 'boolean') {
+      if (defaultConfigType === 'boolean') {
         global.imgix.config[key] = !!metaTagValue;
+      } else if (defaultConfigType === 'object' && defaultConfig[key] != null) {
+        global.imgix.config[key] = JSON.parse(metaTagValue) || {};
       } else {
         global.imgix.config[key] = metaTagValue;
       }