html
<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._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"];
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>
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.