Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
Checking mergeability… Don’t worry, you can still create the pull request.
  • 3 commits
  • 4 files changed
  • 0 commit comments
  • 1 contributor
Commits on May 24, 2011
scottjehl The base directory now includes viewport width and height for more co…
…ntextual redirects on the server-side. The $2 and $3 variables can be used in the rewrite to point to a image generation service. For example, you could redirect to something like example.com/w$2/h$3/%1 and use those parameters on server to generate an image based on those maximum dimensions, ultimately reducing overhead.
32faa85
scottjehl updated min b757012
scottjehl updated readme with info on how to potentially utilize the meaningful…
… base dir
3f64059
Showing with 10 additions and 5 deletions.
  1. +2 −2 .htaccess
  2. +6 −1 README.md
  3. +1 −1 responsiveimgs.js
  4. +1 −1 responsiveimgs.min.js
View
4 .htaccess
@@ -6,7 +6,7 @@
RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
-RewriteRule (.*)rwd-router/.*\.(jpe?g|png|gif) $1%1 [L]
+RewriteRule (.*)rwd-([0-9]+)x([0-9]+)/.*\.(jpe?g|png|gif) $1%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
-RewriteRule (.*)rwd-router/(.*)$ $1$2
+RewriteRule (.*)rwd-([0-9]+)x([0-9]+)/(.*)$ $1$2
# //End Responsive Images
View
7 README.md
@@ -20,7 +20,7 @@ The goal of this technique is to deliver optimized, contextual image sizes in [r
#### How's it work?
-As soon as rwd-images.js loads, it tests the screen width, and if it's large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-router/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ?full query parameter?). It redirects responsive image requests immediately to their full size, while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-router/" segment.
+As soon as rwd-images.js loads, it tests the screen width, and if it's large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory with the naming convention "/rwd-[SCREENWIDTH]x[SCREENHEIGHT]/" (which plays out to something like "/rwd-460x800/" or whatever the screen's resolution happens to be). As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ?full query parameter?). It redirects responsive image requests immediately to their full size, while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the faux routing segment.
### Supported Browsers
Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4
@@ -33,6 +33,11 @@ Unsupported browsers still receive responsive images; the drawback is that both
### Non-Javascript Browsers
Non-javascript enabled/supporting browsers/devices will receive the initial image referenced in the image src attribute (the mobile version)
+### Redirecting to more meaningful image sizes
+If you'd like to cater your large image size to be no larger than the device's screen resolution, you can modify the .htaccess rewrite to utilize the width and height values. Then you can use a server-side solution to dynamically generate images that are sized appropriately. In the rewrite, the width and height values are available through the $2 and $3 values, respectively. Just use them in your rewrite destination and handle things as you'd like on the server. For example, your could redirect to something like: /imageserver/w-$2/h-$3/src-%1 or potentially use a third-party service as well.
+
+
+
### Optional Configuration and Optimizations:
1 option is available for external configuration: widthBreakPoint. You can set it within a global "rwd_images" object that must be defined before rwd-images.js is loaded.
View
2 responsiveimgs.js
@@ -55,7 +55,7 @@
base = null;
}
else{
- base.href = dirPath + "rwd-router/";
+ base.href = dirPath + "rwd-" + screen.width + "x" + screen.height + "/";
}
//return
return base;
View
2 responsiveimgs.min.js
@@ -3,4 +3,4 @@
* Copyright 2011, Scott Jehl, Filament Group, Inc
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
-(function(g){var k=g.rwd_images||{},d=k.widthBreakPoint||480,h="rwd-imgs-lrg",f=g.screen.availWidth>d,e=location.href,l=e.substring(0,e.lastIndexOf("/"))+"/",m=g.document,j=m.getElementsByTagName("head")[0],c=new Date();c.setTime(c.getTime()+(5*1000));m.cookie="rwd-resolution="+screen.width+";expires="+c.toGMTString()+"; path=/";if(!f){return}m.documentElement.className+=" "+h;var b=(function(){var r,q=false,p=m.createElement("a"),o=false,s=j.getElementsByTagName("base")[0]||(function(){q=true;return j.insertBefore(m.createElement("base"),j.firstChild)})();r=!q&&s.href;s.href=location.protocol+"//x/";p.href="y";if(p.href.indexOf("x/y")<0){if(r){s.href=r}else{j.removeChild(s)}s=null}else{s.href=l+"rwd-router/"}return s})(),n=function(){for(var r=0,t=m.getElementsByTagName("img"),p=t.length;r<p;r++){var o=t[r],s=o.getAttribute("src"),q=s.match(/(\?|&)full=(.*)&?/)&&RegExp.$2;if(q){o.src=q}}},a=false,i=function(){if(a){return}a=true;if(!b){n()}};if(m.addEventListener){m.addEventListener("DOMContentLoaded",i,false);g.addEventListener("load",i,false)}else{if(m.attachEvent){m.attachEvent("onreadystatechange",i);g.attachEvent("onload",i)}}})(this);
+(function(g){var k=g.rwd_images||{},d=k.widthBreakPoint||480,h="rwd-imgs-lrg",f=g.screen.availWidth>d,e=location.href,l=e.substring(0,e.lastIndexOf("/"))+"/",m=g.document,j=m.getElementsByTagName("head")[0],c=new Date();c.setTime(c.getTime()+(5*1000));m.cookie="rwd-resolution="+screen.width+";expires="+c.toGMTString()+"; path=/";if(!f){return}m.documentElement.className+=" "+h;var b=(function(){var r,q=false,p=m.createElement("a"),o=false,s=j.getElementsByTagName("base")[0]||(function(){q=true;return j.insertBefore(m.createElement("base"),j.firstChild)})();r=!q&&s.href;s.href=location.protocol+"//x/";p.href="y";if(p.href.indexOf("x/y")<0){if(r){s.href=r}else{j.removeChild(s)}s=null}else{s.href=l+"rwd-"+screen.width+"x"+screen.height+"/"}return s})(),n=function(){for(var r=0,t=m.getElementsByTagName("img"),p=t.length;r<p;r++){var o=t[r],s=o.getAttribute("src"),q=s.match(/(\?|&)full=(.*)&?/)&&RegExp.$2;if(q){o.src=q}}},a=false,i=function(){if(a){return}a=true;if(!b){n()}};if(m.addEventListener){m.addEventListener("DOMContentLoaded",i,false);g.addEventListener("load",i,false)}else{if(m.attachEvent){m.attachEvent("onreadystatechange",i);g.attachEvent("onload",i)}}})(this);

No commit comments for this range

Something went wrong with that request. Please try again.