Hosting static images on subdomain while using retina.js

Question

I am trying to get retina.js to work on a tumblr that I have CNAME'd my subdomain to.

So I have blog.benwhitla.com pointing to benwhitla.tumblr.com using CNAME, as tumblr recommends. I want to host both normal and @2x static inline images, and have the retina images automatically displayed on retina displays using retina.js. For retina.js to work, the images must be either on the same domain as the js file, or a subdomain.

Find the retina.js discussion on this here: https://github.com/imulus/retinajs/issues/40

So following this thinking, I created a sub-subdomain: i.blog.benwhitla.com. Since it appears that retina.js should be able to grab images in a subdomain of the current domain, I expected this to work.

Testing here: http://benwhitla.com/client/retina/

The first image is hosted externally, and doesn't work - this is expected. The second image is in the same location as the html and js, and works fine. The third image is hosted on i.blog.benwhitla.com, which is technically a subdomain of benwhitla.com, so I expected the retina image to pull, but it does not.

Perhaps two subdomains is too many for retina.js to support?

Any ideas? I've been banging my head against a wall on this one for 2 days.

I've also tried using relative paths for everything (the css, images and js) like:

//i.blog.benwhitla.com

but it made no difference.

Thanks for the help.

Edit: Starting using the forked version of retina.js that is supposed to actually support subdomains from the github issue linked above (I can't add more than 2 links in stackoverflow yet).

But it throws the following error, even if I define document.domain as benwhitla.com.

XMLHttpRequest cannot load http://i.blog.benwhitla.com/img/benwhitla@2x.png. Origin http://blog.benwhitla.com is not allowed by Access-Control-Allow-Origin.

Edit Not allowed to respond to my own question here, so here is where I'm at now, it's not a good fix, but it pulls the image at least:

Well, I'm sure this is the wrong way, but using the newer script that allows subdirectories, and changing all the FALSE's to TRUE in this section, it now works. Although maybe it's, like, unsafe now?

  RetinaImagePath.prototype.check_2x_variant = function(callback) {
    var http, that = this;
    if (this.is_external()) {
      return callback(true);
    } else if (this.at_2x_path in RetinaImagePath.confirmed_paths) {
      return callback(true);
    } else {
      http = new XMLHttpRequest;
      http.open('HEAD', this.at_2x_path);
      http.onreadystatechange = function() {
        if (http.readyState != 4) {
          return callback(true);
        }

        if (http.status >= 200 && http.status <= 399) {
          if (config.check_mime_type) {
            var type = http.getResponseHeader('Content-Type');
            if (type == null || !type.match(/^image/i)) {
              return callback(false);
            }
          }

          RetinaImagePath.confirmed_paths.push(that.at_2x_path);
          return callback(true);
        } else {
          return callback(true);
        }
      }
      http.send();
    }

Also, it now throws an error if there ISN'T an @2x image.

Hosting static images on subdomain while using retina.js

0 Answers0