This is a release based on a third party tool I just bought. This extension requires an account with Cloud Image, a great Software as a Service (SaaS) that provides an image CDN and URL-based dynamic image transformations. So, this little extension should come in handy for image heavy projects and reduce the size of them instantly while boosting ping and distribution around the globe. It works with your current host and enhances the experience by lifting resource to the cloud infrastructure on the fly while converting them to smaller file sizes and dynamically delivering them based on the browser support (webp etc.). Once you remove this extension thing immediately go back to normal.
The tool has a free tier of 25GB that should be enough for most Hype usecases.
My review of the Cloud Image SaaS
For me, one of their customers confirmed that this is a great SaaS! Being from Germany I like and grew up with the early tech magazins like "mc" (Die Mikrocomputer-Zeitschrift, 1981-1996) and with the publication "c't" (Magazin für Computertechnik, 1983-ongoing) from heise. These are pretty nerdy magazins and highly focused on technology, benchmarking and programming.
It is certainly a badge of honor that the publishing house heise chose Cloud Image to be their asset and image provider and it sold me personally instantly. Furthermore, once you look at the possibilities (and docs) it gets your imagination going and I already got some little project cooking like a HTML5 widget caching script, and I am planning to build a PDF viewer using the PDF to image conversion. I haven't tested the WordPress integration yet, but given my impressions so far I am looking forward evaluating that as well.
I will upload this to GitHub soon.
/*!
Hype CloudImage 1.2
copyright (c) 2020 Max Ziebell, (https://maxziebell.de). MIT-license
*/
/*
* Version-History
* 1.0 Initial release under MIT
* 1.1 Bugfixes in sub-events
* 1.2 Remove v7 as new accounts don't need it anymore
*/
if("HypeCloudImage" in window === false) window['HypeCloudImage'] = (function () {
var _host = null;
var _token = null;
function notifyEvent (hypeDocument, event, element) {
var eventListeners = window['HYPE_eventListeners'];
if (eventListeners == null) {
return;
}
var result;
for (var i = 0; i < eventListeners.length; i++) {
if (eventListeners[i]['type'] == event['type'] && eventListeners[i]['callback'] != null) {
result = eventListeners[i]['callback'](hypeDocument, element, event);
if (result === false) {
return false;
}
}
}
return result;
}
function resourceLoad (hypeDocument, element, event) {
if(_host && _token) {
if (event.url.indexOf('//'+_host)>-1) {
var e = Object.assign({},event);
e.fileName = event.url.substr((Math.max(0, event.url.lastIndexOf("/")) || Infinity) + 1);
e.fileType = e.fileName.substr((Math.max(0, e.fileName.lastIndexOf(".")) || Infinity) + 1);
e.cloudUrl = 'https://'+_token+'.cloudimg.io/'+event.url.replace('http://','').replace('https://','');
e.type = 'HypeCloudImage';
var result = notifyEvent (hypeDocument, e, element);
var url = (result===false) ? event.url : result || e.cloudUrl;
switch(e.fileType.toLowerCase()){
case 'jpg':
case 'jpeg':
case 'png':
return url;
break;
default:
if (url.indexOf('?')==-1) {
return url + '?func=proxy';
} else {
return url + '&func=proxy';
}
break;
}
}
}
}
function setup(host, token){
_host = host;
_token = token;
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback": resourceLoad});
/* Reveal Public interface to window['HypeCloudImage'] */
return {
version: '1.2',
'setup' : setup,
};
})();
Usage:
HypeCloudImage.setup('YOUR-HOST-WITHOUT-PROTOCOL', 'YOUR-TOKEN');
That's it your done!
The following is totally optional as I added a custom callback to this extension allowing you to return the cloud URL with some additional transformations and filters based on circumstances in your Hype document (like layout, scene or device etc.).
Callback and dynamic modification (optional):
function cloudImage (hypeDocument, element, event) {
if (event.fileType=='jpg' && hypeDocument.currentLayoutName()=='iPhone') {
return event.cloudUrl+'?width=200&grey=1';
}
}
window.HYPE_eventListeners.push({"type":"HypeCloudImage", "callback": cloudImage});
Demo:
HypeCloudImage.html
To see what is going on use the inspector and look at the image source (being a smaller file size, delivered from the cloud and most likely webp) and resize the browser to reveal the mobile layout (grey and scaled version for mobile) in this example.
