Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Update: When referencing responsive images, add a ".r" prefix to the …

…file extension. This will ensure that ONLY responsive images are redirected to the temp gif. All other images (and other requests) will resolve to their proper destination.

Fixes #2
  • Loading branch information...
commit 3fed054496890d16530fbf8276f36effccf8a770 1 parent 41f2966
scottjehl authored
Showing with 13 additions and 10 deletions.
  1. +5 −3 .htaccess
  2. +5 −3 README.md
  3. +3 −1 demo.html
  4. +0 −3  rwd-images/rwd-images.js
8 .htaccess
View
@@ -5,7 +5,9 @@
# //Start Responsive Images
RewriteEngine On
# direct image requests to temp
-RewriteRule ^rwd-image-trap/.*\.(jpe?g|png|gif)$ rwd-images/rwd.gif
-#ignore trap for non-image requests, rewrite URL without trap segment
-RewriteRule ^rwd-image-trap/(.*\.(?!jpg|jpeg|png|gif)(.+)) $1
+RewriteRule .*rwd-image-trap/.*\.r\.(jpe?g|png|gif)$ rwd-images/rwd.gif [L]
+# ignore trap for non-image requests, rewrite URL without trap segment
+RewriteRule (.*)rwd-image-trap/(.*)$ $1$2
+# remove .r from all requests
+RewriteRule (.*)\.r(\.(jpe?g|png|gif))$ $1$2
# //End Responsive Images
8 README.md
View
@@ -14,13 +14,15 @@ The goal of this technique is to deliver optimized, contextual image sizes in [r
<script src="rwd-images/rwd-images.min.js"></script>
-3. Add data-fullsrc attributes to any img elements that offer a larger desktop-friendly size:
+3. Add a data-fullsrc attribute to any img elements that offer a larger desktop-friendly size AND ALSO add an ".r" prefix to those images' file extensions in the src attribute ("small.jpg" becomes "small.r.jpg").
- &lt;img src="small.jpg" data-fullsrc="large.jpg"&gt;
+ &lt;img src="small.r.jpg" data-fullsrc="large.jpg"&gt;
+
+Note: the actual image file does not need the ".r" in its filename. The .htaccess will remove this when requesting the actual file.
#### How's it work?
-As soon as rwd-images.js loads, 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-image-trap/". As these requests reach the server, the .htaccess file determines whether the request is an image or not. It redirects image requests to rwd.gif (a transparent 1px gif image), while all non-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-image-trap/" segment. When the HTML finishes loading, the script removes the BASE element from the DOM (resetting the base URL) and sets the image sources to either their small or large size (when specified), depending on whether the screen resolution is greater than 480px.
+As soon as rwd-images.js loads, 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-image-trap/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ".r.png", ".r.jpg" extension?). It redirects responsive image requests to rwd.gif (a transparent 1px gif image), while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-image-trap/" segment. When the HTML finishes loading, the script removes the BASE element from the DOM (resetting the base URL) and sets the image sources to either their small or large size (when specified), depending on whether the screen resolution is greater than 480px.
### Supported Browsers
Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera
4 demo.html
View
@@ -27,7 +27,9 @@
<h1>Responsive Images Test Page</h1>
<p>In supported browsers, the following image will load either small or large version depending on screen resolution, making a single 1kb request before requesting the appropriate size.</p>
- <img src="sample-content/running-sml.jpg" data-fullsrc="sample-content/running-lrg.jpg">
+ <!-- ADD THE "r." prefix to your image extension for any responsive images -->
+ <img src="sample-content/running-sml.r.jpg" data-fullsrc="sample-content/running-lrg.jpg">
+
<!-- sample assets to show that non-image requests in the body will not be affected (unless clientSideOnly is set to true!) -->
<script src="sample-content/UNAFFECTED.js"></script>
3  rwd-images/rwd-images.js
View
@@ -55,9 +55,6 @@
if(fullsrc){
img.src = fullsrc;
}
- else{
- img.src = img.src;
- }
}
},
//base tag support test (returns base tag for use if support test passes)
Please sign in to comment.
Something went wrong with that request. Please try again.