Permalink
Browse files

use tinySrc to generate scaled images based on client window

  • Loading branch information...
atrasatti committed May 29, 2011
1 parent 3f64059 commit 30ebc7a82f4e49ac95dee50b00cf9dc645e8bfbb
Showing with 8 additions and 5 deletions.
  1. +5 −2 .htaccess
  2. +3 −3 responsiveimgs.js
View
@@ -6,7 +6,10 @@
RewriteEngine On
# direct image requests to temp
RewriteCond %{QUERY_STRING} full=(.*)&?
RewriteRule (.*)rwd-([0-9]+)x([0-9]+)/.*\.(jpe?g|png|gif) $1%1 [L]
#RewriteRule (.*)rwd-([0-9]+)x([0-9]+)/.*\.(jpe?g|png|gif) $1%1 [L]
#This rule does not take into account SSL. Also you might want to use %{SERVER_PORT} if you are not using port 80
#This only works if you set the FULL path to the content. Relative paths won't work unless you do some more RegExp magic
RewriteRule (.*)rwd-([0-9]+)x([0-9]+)/.*\.(jpe?g|png|gif) http://src.sencha.io/$2/$3/http://%{HTTP_HOST}/%1 [L]
# ignore trap for non-image requests, rewrite URL without trap segment
RewriteRule (.*)rwd-([0-9]+)x([0-9]+)/(.*)$ $1$2
# //End Responsive Images
# //End Responsive Images
View
@@ -6,7 +6,7 @@
(function( win ){
//defaults / mixins
var rwdi = win.rwd_images || {},
widthBreakPoint = rwdi.widthBreakPoint || 480,
widthBreakPoint = rwdi.widthBreakPoint || 360,
htmlClass = "rwd-imgs-lrg",
wideload = win.screen.availWidth > widthBreakPoint,
filePath = location.href,
@@ -55,7 +55,7 @@
base = null;
}
else{
base.href = dirPath + "rwd-" + screen.width + "x" + screen.height + "/";
base.href = dirPath + "rwd-" + (screen.width-20) + "x" + (screen.height-20) + "/";
}
//return
return base;
@@ -100,4 +100,4 @@
//fallback
win.attachEvent( "onload", readyCallback );
}
})(this);
})(this);

2 comments on commit 30ebc7a

@carlostubff

This comment has been minimized.

Show comment
Hide comment
@carlostubff

carlostubff Jul 30, 2012

Hi, im trying to use your solution, but i have a question...this works with images served by CDN? thanks in advance

carlostubff replied Jul 30, 2012

Hi, im trying to use your solution, but i have a question...this works with images served by CDN? thanks in advance

@atrasatti

This comment has been minimized.

Show comment
Hide comment
@atrasatti

atrasatti Nov 22, 2012

Owner

I see this only now. Sorry I missed it. I will reply for the benefit of future users.

The solution will work, but since the image is served by TinySrc and not by your CDN you lose the benefits of the CDN. What you should do is cache the rescaled image on your CDN instead. Of course it will not be a drop-in solution like this.

Owner

atrasatti replied Nov 22, 2012

I see this only now. Sorry I missed it. I will reply for the benefit of future users.

The solution will work, but since the image is served by TinySrc and not by your CDN you lose the benefits of the CDN. What you should do is cache the rescaled image on your CDN instead. Of course it will not be a drop-in solution like this.

Please sign in to comment.