0

When using images on a site, retina.js automatically looks for an image in the same folder with the same name with the added @2x, and then swaps out if the user has a high-DPI screen.

What I am trying to do is to tell retina.js to instead look for this retina @2x image in a sub folder. So if I'm using image.png, I want retina.js to look for image@2x.png in a subfolder named Retina for example.

I won't get into why I need this, but that is the gist of it. So then, is this possible, and where do I do this? I've found this part of retina.js that looks like it could do something along the lines of what I want, but I'm not sure how to proceed.

function RetinaImagePath(path, at_2x_path) {
    this.path = path || '';
    if (typeof at_2x_path !== 'undefined' && at_2x_path !== null) {
        this.at_2x_path = at_2x_path;
        this.perform_check = false;
    } else {
        if (undefined !== document.createElement) {
            var locationObject = document.createElement('a');
            locationObject.href = this.path;
            locationObject.pathname = locationObject.pathname.replace(regexMatch, suffixReplace);
            this.at_2x_path = locationObject.href;
        } else {
            var parts = this.path.split('?');
            parts[0] = parts[0].replace(regexMatch, suffixReplace);
            this.at_2x_path = parts.join('?');
        }
        this.perform_check = true;
    }
}

Thank you.

t.niese
  • 39,256
  • 9
  • 74
  • 101
Simon
  • 103
  • 2
  • Is there a reason why you can't solve that with a server-side rewriting of the url? I don't suggest to change a technique that - while not a standard - has an expected behavior. – t.niese Feb 15 '15 at 16:41
  • @t.niese: The reason I'm trying to do this is this: I'm using Stacey as the CMS for my little portfolio site. Stacey looks for images in a project folder and displays them. If I include an `@2x` image both images is displayed. And I cannot manage to make it only look for images without the `@2x` label. So instead I want it to look for retina images in another folder. – Simon Feb 15 '15 at 16:45
  • I don't know Stacey but I assume it is this [staceyapp.com](http://staceyapp.com/) and that you use apache2 as Webserver? If so then you could add a rewrite rule to the `.htaccess` that will rewirte all your `@2x` to have the root `/Retina`, the rule might look similar to `RewriteRule ^(.*)@2x(.*)$ /Retina/$1@2x$2 [L]` (this rule most likely is not valid as I didn't test it) – t.niese Feb 15 '15 at 16:51
  • @t.niese: Yes, that Stacey. That sounds like a good solution. I will try and report back. – Simon Feb 15 '15 at 17:08
  • @t.niese: After adding the rewrite rule to my `.htaccess` the low-res `image.png` is still served on a Retina display. Ideas as to why retina.js doesn't manage to fetch the correct image? And to be clear: `image@2x.png` should still be inside `/Retina`, right? – Simon Feb 15 '15 at 17:33
  • But if you try to access the images `/images/image@2x.png` and `/images/image.png` in your browser you will see the correct images? (the rewrite rule should internally rewrite the request e.g. from `/images/image@2x.png` to `Retina/images/image@2x.png` so the requested url will be `/images/image@2x.png` but the file will be stored in the path `/Retina/images/image@2x.png` – t.niese Feb 15 '15 at 17:36
  • @t.niese: Ah, perhaps this is where the issue lies. I want `image@2x.png` to be located within `/images/Retina/image@2x.png` instead of `Retina/images/image@2x.png`. I can no longer access the `2@x` image inside the folder i described. – Simon Feb 15 '15 at 17:42
  • Well then you would just need to change the `RewriteRule` that way. If you don't manage to create this your own I suggest to create a new question for that. – t.niese Feb 15 '15 at 17:53
  • @t.niese Haha, alright. I will. – Simon Feb 15 '15 at 18:09
  • @t.niese: Here is the new question if you'd like to contribute: http://stackoverflow.com/questions/28529588/refer-to-subfolder-in-htaccess – Simon Feb 15 '15 at 18:38

0 Answers0