Blue Angels in Black and White

The sky was overcast with a helping of haze during the 2016 Jacksonville Air Show. Color images look dull without a nice blue sky. Black-and-white (done right) doesn't have that problem^1^^.

For example, here's the Blue Angels in Black and White^2^^.

*NOTE: This codes has been commented out to work with MDX. TODO: Update this for MDX*

Code

<script type="text/javascript">
var ImageLoaderDevV1 = function() { };

ImageLoaderDevV1.prototype.url_to_call = function() {
  return this._url_template.replace('[WIDTH]', this.url_request_width()).replace('[HEIGHT]', this.url_request_height()).replace('[QUALITY]', this._quality).replace('[IMAGE_NAME]', this._image_name) 
};

ImageLoaderDevV1.prototype.img_tag = function() {
  return '<img class="center-block" src="' + this.url_to_call() + '" width="' + this.render_width() + '" height="' + this.render_height() + '" />'
};

ImageLoaderDevV1.prototype.load_params = function(params) {
  // This is the core funciton that takes all possible inputs.
  // Convience methods will be used in production, but they will all communicate
  // load_params. 

  // Required
  this._image_name = params["image_name"];
  this._viewport_height = params["viewport_height"];
  this._viewport_width = params["viewport_width"];
  this._raw_height = params["raw_height"];
  this._raw_width = params["raw_width"];
  this._url_template = params["url_template"];

  // Optional 
  this._dpr = params["dpr"] ? params["dpr"] : 1;
  this._max_render_width = params["max_render_width"] ? params["max_render_width"] : params["raw_width"];
  this._percent_of_viewport_width = params["percent_of_viewport_width"] ? params["percent_of_viewport_width"] : 100;
  this._quality = params["quality"] ? params["quality"] : 80;
};

ImageLoaderDevV1.prototype.render_height = function() {
  return  Math.floor(this._raw_height * this.render_width() / this._raw_width );
};

ImageLoaderDevV1.prototype.render_width = function() {
  return Math.floor(Math.min(this._max_render_width, (this._percent_of_viewport_width * .01 * this._viewport_width)));
};

ImageLoaderDevV1.prototype.url_request_height = function() {
  return this.render_height() * this._dpr; 
};

ImageLoaderDevV1.prototype.url_request_width = function() {
  return this.render_width() * this._dpr; 
};

var imageLoader = new ImageLoaderDevV1;

</script>




<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1543-17a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 1047,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>

<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1517-04a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 1037,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>

<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1534-06b-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 687,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>


<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1543-11a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 729,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>


<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1538-24a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 1093,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>





<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1537-05b-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 961,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>

_Footnotes_

1. I prefer working in black-and-white anyways. Something working on these images reinforced yet again.

2. These images are being called by a responsive images loader I'm working on. It's still a work in progress. If you see something weird, or no images at all, please let me know. If this tech gibberish doesn't make any sense to you, you can safely ignore it.