solution to use adaptive images with remote server

[chrisben]

Hi there, First thanks for your work on this project, it is very useful indeed!

Here's the context: my webpages are running with the file:// domain within phonegap (web app), but some images (the ones I want to resize dynamically) are coming from the server. I wanted to use the simple javascript solution but the cookie needs to be set on another domain: the domain that hosts the images. Setting the cookie from the js is useless as they are not within the same domain.

I've considered using the ai-cookie script but I felt the css code was feeling wrong for some reason, furthermore it was missing the new retina display ratio setting (understandably as you do not support the ai-cookie solution).

Here's my attempt to try to mix both, it seems to work ok so far, but I want your opinion on it, and if you find it useful I could send you a pull request for it.

js code for the website:

var server = 'http://myserver.com';
var aicookie_script = '/ai-cookie.php';
var param1 = 'res='+Math.max(screen.width,screen.height);
var param2 = 'dpr='+("devicePixelRatio" in window ? window.devicePixelRatio : '1');
var url = server + aicookie_script + '?' + param1 + '&' + param2;
// preload the 'image' (it's actually an empty image : just an excuse to get that cookie set)
var imageObj = new Image();
imageObj.src = url;

ai-cookie.php:

<?php
$resolution = isset($_GET['res']) ? intval($_GET['res']) : 3000; // we need a number, so give it something unfeasable
$devicePixelRatio = isset($_GET['dpr']) ? intval($_GET['dpr']) : 1;

// setcookie will htmlencode the comma there, but luckily this will get decoded when read back using $_COOKIE
setcookie('resolution', $resolution.','.$devicePixelRatio, time()+604800,'/'); // set the cookie

// respond with an empty content
header('HTTP/1.1 204 No Content');
exit();

I suppose this doesn't prevent the issue you describe in the instructions document: the first page to be loaded will not have the cookie set early enough so the resize feature will only work from the second page. right? I'm fine with that limitation, at least I can now use the wonderful adaptive images with the server and the webpage on a different domain (with phonegap).

Let me know what you think of it.

Cheers