Skip to content
Browse files

Initial mods

  • Loading branch information...
1 parent 5725f37 commit f2d30ff9e04e620469aee63f9e2799a03a6b3862 @cfjedimaster committed
Showing with 203 additions and 564 deletions.
  1. +1 −1 .htaccess
  2. +177 −0 adaptive-images.cfm
  3. +0 −511 adaptive-images.php
  4. +0 −9 ai-cookie.php
  5. +19 −43 instructions.htm
  6. +6 −0 readme.txt
View
2 .htaccess
@@ -12,7 +12,7 @@
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to image-routing.php so we can select appropriately sized versions
- RewriteRule \.(jpg|jpeg|gif|png) adaptive-images.php
+ RewriteRule \.(jpg|jpeg|gif|png) adaptive-images.cfm
# END Adaptive-Images -------------------------------------------------------------------------------
</IfModule>
View
177 adaptive-images.cfm
@@ -0,0 +1,177 @@
+<cflog file="application" text="AI: Running">
+
+<cffunction name="header">
+ <cfargument name="namevalue" type="string" required="true">
+ <cfheader name="#trim(listFirst(arguments.namevalue,":"))#" value="#listRest(arguments.namevalue,":")#">
+</cffunction>
+
+<cffunction name="sendImage">
+ <cfargument name="filename">
+ <cfargument name="mime_type">
+ <cfargument name="browser_cache" default="">
+ <cfheader name="Content-type" value="#mime_type#">
+ <cfheader name="Pragma" value="public">
+ <cfif isNumeric(arguments.browser_cache)>
+ <cfheader name="Cache-Control" value="maxage=#arguments.browser_cache#">
+ <!---
+ //header('Expires: '.gmdate('D, d M Y H:i:s', time()+$browser_cache).' GMT');
+ --->
+ </cfif>
+ <cfset var fi = getFileInfo(arguments.filename)>
+ <cfheader name="Content-Length" value="#fi.size#">
+ <cflog file="application" text="sending #arguments.filename# with #arguments.mime_type#">
+ <cfcontent file="#arguments.filename#" type="#arguments.mime_type#">
+ <cfabort>
+</cffunction>
+
+<cfscript>
+resolutions = [1382,992,768,430]; // the resolution break-points to use (screen widths, in pixels)
+cache_path = "ai-cache"; // where to store the generated re-sized images. This folder must be writable.
+jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
+sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
+watch_cache = TRUE; // check that the responsive image isn't stale (ensures updated source images are re-cached)
+browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
+mobile_first = true; // If there's no cookie deliver the mobile version (if FALSE, delivers original resource)
+
+document_root = expandPath("/");
+requested_uri = cgi.redirect_url;
+requested_file = listLast(requested_uri, "/");
+writelog(file="application", text="AI: Requested #requested_uri#");
+extension = listLast(requested_file, ".");
+
+switch (extension){ // sort out MIME types for different file types
+ case "png":
+ mime_type = "image/png";
+ break;
+ case "gif":
+ mime_type = "image/gif";
+ break;
+ default:
+ mime_type = "image/jpeg";
+ break;
+}
+
+if (!fileExists(document_root & requested_uri)){ // and the requested file doesn't exist either
+ writelog(file="application", text="AI: Left cuz it didn't exist: #document_root##requested_uri#");
+ header("Status: 404 Not Found");
+ abort;
+}
+
+//If no cookie and !mobile first or bad cookie send original
+if(
+ (!structKeyExists(cookie, "resolution") && !mobile_first)
+ ||
+ (structKeyExists(cookie, "resolution") && !isNumeric(cookie.resolution))) {
+
+ sendImage(document_root & requested_uri,mime_type,browser_cache);
+
+}
+
+arraySort(resolutions, "numeric","desc"); // make sure the supplied break-points are in ascending size order
+resolution = resolutions[1]; //This is the default
+
+if(structKeyExists(cookie, "resolution")){
+ writelog(file="application",text="AI: cookie.resolution=#cookie.resolution#");
+ client_width = cookie.resolution; // store the cookie value in a variable
+
+ for(res in resolutions) {
+ writelog(file="application",text="res=#res#");
+ if(client_width <= res) resolution=res;
+ }
+}
+
+writelog(file="application", text="AI: res=#resolution#");
+writelog(file="application", text="AI: cache #document_root#/#cache_path#/#resolution#/#requested_uri#");
+if(fileExists(document_root & "/#cache_path#/#resolution#/"&requested_uri)) { // it exists cached at that size
+ writelog(file="application", text="AI: Cache existed");
+ sendImage(document_root&"/#cache_path#/#resolution#/"&requested_uri,mime_type,browser_cache);
+}
+else { // it doesn't exist at that size cached
+
+ if(watch_cache) { // if cache watching is enabled, compare cache and source modified dates to ensure the cache isn't stale
+
+ cache_file = document_root &"/" & cache_path & "/" & resolution &"/" & requested_uri;
+ if(fileExists(cache_file)) cache_date = getFileInfo(cache_file).lastmodified;
+ source_date = getFileInfo(document_root & requested_uri).lastmodified;
+ //writelog(file="application", text="cmp #cache_date# to #source_date# ");
+ if(!fileExists(cache_file) || cache_date < source_date) { // the source file has been replaced since the cache was generated
+ // Check the image dimensions
+ source_image = document_root & requested_uri;
+ src = imageRead(source_image);
+ width = imageGetWidth(src);
+ height = imageGetheight(src);
+
+ // Do we need to downscale the image?
+ if(width <= resolution) { // no, because the width of the source image is already less than the client width
+ writeLog(file="application", text="Width #width# less than res #resolution#");
+ sendImage(document_root & requested_uri);
+ }
+
+ // We need to resize the source image to the width of the resolution breakpoint we're working with
+ ratio = height/width;
+ new_width = resolution;
+ new_height = ceiling(new_width * ratio);
+
+ dst = src; //Need to change this
+ imageResize(dst, new_width, new_height); // re-sized image
+ //ImageCopyResampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height); // do the resize in memory
+
+ // sharpen the image?
+ if(sharpen == TRUE) {
+ imageSharpen(dst);
+ }
+
+ // check the path directory exists and is writable
+ directories = replace(requested_uri, "/#requested_file#", ""); // get the directories only
+ directories = right(directories, len(directories)-1); // clean the string
+ writelog(file="application", text="AI: directories=#directories#, to check:#document_root#/#cache_path#/#resolution#/#directories# - exisT? #directoryExists("#document_root#/#cache_path#/#resolution#/#directories#")#");
+
+ if(!directoryExists("#document_root#/#cache_path#/#resolution#/#directories#")){ // does the directory exist already?
+ /*
+ if (!mkdir("$document_root/$cache_path/$resolution/$directories", 0777, true)) { // make the directory
+ // uh-oh, failed to make that directory
+ ImageDestroy($src); // clean-up after ourselves
+ ImageDestroy($dst); // clean-up after ourselves
+
+ // notify the client by way of throwing a message in a bottle, as that's all we can do
+ $im = ImageCreateTrueColor(800, 200);
+ $text_color = ImageColorAllocate($im, 233, 14, 91);
+ ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
+ header("Pragma: public");
+ header("Cache-Control: maxage=" & $browser_cache);
+ header('Expires: ' & gmdate('D, d M Y H:i:s', time()+$browser_cache) & ' GMT');
+ header('Content-Type: image/jpeg');
+ ImageJpeg($im); ImageDestroy($im);
+ exit();
+ }
+ */
+ //create the dir - handle errors later
+ directoryCreate("#document_root#/#cache_path#/#resolution#/#directories#");
+ writelog(file="application",text="AI: Made=#document_root#/#cache_path#/#resolution#/#directories#");
+ }
+
+ // save the new file in the appropriate path, and send a version to the browser
+ imageWrite(dst, "#document_root#/#cache_path#/#resolution#/#directories#/#requested_file#");
+
+ /*
+ if(!$gotSaved) {
+ // Couldn't save image, notify the client by way of throwing a message in a bottle, as that's all we can do
+ $im = ImageCreateTrueColor(800, 200);
+ $text_color = ImageColorAllocate($im, 233, 14, 91);
+ ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
+ header('Content-Type: image/jpeg');
+ ImageJpeg($im); ImageDestroy($im);
+ exit();
+ }
+ else { // we saved the image to cache, now deliver the image to the client
+ */
+ //ImageDestroy($src); ImageDestroy($dst);
+ sendImage("#document_root#/#cache_path#/#resolution#/#directories#/#requested_file#",mime_type,browser_cache);
+ /*}*/
+ }
+
+ } // end of if watch-cache
+
+
+} // end it doesn't exist at the mobile size cached
+</cfscript>
View
511 adaptive-images.php
@@ -1,511 +0,0 @@
-<?php
-/* FILE INFO ----------------------------------------------------------------------------------------------------------
- http://adaptive-images.com | Twitter: @responsiveimg
-
- version 1.3 beta (2011/08/31) ------------------------------------------------------------
- NEW FEATURES
- * Added support for Mobile First philosophy (see CONFIG, $mobile_first)
-
- NOTES
- When $mobile_first is set to TRUE it means the mobile sized version of the requested
- image will be sent in the event that no cookie is set (likely because JavaScript is
- unavailable). If FALSE, the original image is sent.
-
- There is a known problem with Firefox on a first visit to a site where $mobile_first
- is TRUE. It doesn't set the cookie fast enough, so the very first load sends the mobile
- size image. All page loads after are fine. Opera, Safari, and Chrome all work OK.
-
- version 1.2.2 (2011/08/30) ------------------------------------------------------------
- NEW FEATURES
- * Unsupported no-javascript solution (see instructions.htm)
-
- version 1.2.1 (2011/08/26) ------------------------------------------------------------
- NO NEW FEATURES
- I have re-branded Responsive-Images to "Adaptive-Images", firstly to help distinguish
- this project from the identically named project by Filament Group, and secondly
- because it's a more appropriate name. This system actively adapts existing images as
- well as "responding" to the visitors viewport to serve an appropriately sized version.
-
- NOTES
- The project is now available on GitHub for those who wish to track it there:
- https://github.com/MattWilcox/Adaptive-Images
-
- version 1.2 (2011/08/21) ------------------------------------------------------------
- Contributions by Fabian Beiner, with thanks :)
- NEW FEATURES
- * Support for PNG and GIF images
- * Added ability to sharpen re-scaled images (see CONFIG, $sharpen)
- BUG FIXES
- * Better extension detection (.jpeg was failing)
- * First-run Firefox bug fixed. The JS must be in-line, in the <head>!
- DETAILS:
- Firefox (and potentially others, but not observed anywhere else) was requesting
- the first <img> before it loaded the external javascript file, even when in the
- <head>. This caused Firefox to load the full-resolution image the very first
- time the site was visited. All subsequent page views were fine.
- OTHER IMPROVEMENTS
- * Cleaned up the .htaccess file and included clear comments on use
- * Vastly improved instructions and examples on the downloadable zip
- * Since 1.1 fixed issues with browser cache, default cache time now set to 7 days
- * Refactored PHP code
-
- version 1.1 (2011/08/16) ------------------------------------------------------------
-
- NEW FEATURES
- * Re-engineered the size detection methodology.
-
- Now detects maximum possible screen size of the device instead of the current
- window size. This removes the problem of visitors with small windows caching
- small images to the browser, then upon maximising the browser having too small
- images for the new screen size. It also simplifies the JS back down to its
- original "just dump the size into a cookie" functionality.
-
- This update removes the following:
-
- * All JS config options
-
- version 1.0 (2011/08/09) ------------------------------------------------------------
-
- NEW FEATURES
- * Headers sent along with the image, for browser side caching (see CONFIG, $browser_cache)
- * JavaScript responds to window re-sizes, requests higher res images if required
- BUG FIXES
- * Fixed the MIME type for JPG's (image/jpeg not image/jpg)
-
- beta 2 (2011/08/04) -----------------------------------------------------------------
-
- NEW FEATURES
- * Added the ability to control generated image quality (see CONFIG, $jpg_quality)
- * Added configurable resolution breakpoints (see CONFIG, $resolutions)
- * Optional Cache checking - defaults to on (see CONFIG, $watch_cache)
- BUG FIXES
- * The PHP now checks that the GD extension is loaded before proceeding
- * Clarified comments further
-
- beta 1 (2011/08/01) -----------------------------------------------------------------
-
- NEW FEATURES
- * Initial public release
- * Commented the PHP for public consumption
- * Added user-configurable cache directory (see CONFIG, $cache_path)
- BUG FIXES
- * Didn't generate downscaled images due to typo
-
-/* CONFIG ----------------------------------------------------------------------------------------------------------- */
-
-$resolutions = array(1382,992,768,480); // the resolution break-points to use (screen widths, in pixels)
-$cache_path = "ai-cache"; // where to store the generated re-sized images. This folder must be writable.
-$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
-$sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
-$watch_cache = TRUE; // check that the responsive image isn't stale (ensures updated source images are re-cached)
-$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
-$mobile_first = FALSE; // If there's no cookie deliver the mobile version (if FALSE, delivers original resource)
-
-/* END CONFIG ----------------------------------------------------------------------------------------------------------
------------------------- Don't edit anything after this line unless you know what you're doing -------------------------
---------------------------------------------------------------------------------------------------------------------- */
-
-/* get all of the required data from the HTTP request */
-$document_root = $_SERVER['DOCUMENT_ROOT'];
-$requested_uri = (stripos($_SERVER['REQUEST_URI'], '?')) ? substr($_SERVER['REQUEST_URI'], 0, stripos($_SERVER['REQUEST_URI'], '?')) : $_SERVER['REQUEST_URI'];
-$requested_file = basename($requested_uri);
-$extension = strtolower(pathinfo($requested_file, PATHINFO_EXTENSION)); // filename extension of the passed uri
-
-/* set up some variables we'll use later */
-switch ($extension){ // sort out MIME types for different file types
- case png:
- $mime_type = "Content-Type: image/png";
- break;
- case gif:
- $mime_type = "Content-Type: image/gif";
- break;
- default:
- $mime_type = "Content-Type: image/jpeg";
- break;
-}
-
-/* helper function: Send headers and returns an image. */
-function sendImage($filename,$mime_type,$browser_cache) {
- header($mime_type);
- header("Pragma: public");
- header("Cache-Control: maxage=".$browser_cache);
- header('Expires: '.gmdate('D, d M Y H:i:s', time()+$browser_cache).' GMT');
- header('Content-Length: '.filesize($filename));
- readfile($filename);
- exit();
-}
-
-/* sharpen images function */
-function findSharp($intOrig, $intFinal) {
- $intFinal = $intFinal * (750.0 / $intOrig);
- $intA = 52;
- $intB = -0.27810650887573124;
- $intC = .00047337278106508946;
- $intRes = $intA + $intB * $intFinal + $intC * $intFinal * $intFinal;
- return max(round($intRes), 0);
-}
-
-/* check that PHP has the GD library available to use for image re-sizing */
-if(!extension_loaded('gd')){ // it's not loaded
- if (!dl('gd.so')) { // and we can't load it either
- if (!file_exists($document_root.$requested_uri)){ // and the requested file doesn't exist
- header("Status: 404 Not Found");
- exit();
- }
-
- // no GD available, but the requested image exists, so deliver that straight up
- sendImage($document_root.$requested_uri,$mime_type,$browser_cache);
- }
-}
-
-/* Check to see if a cookie exists */
-if(!$_COOKIE["resolution"]){ // no cookie
- if (!file_exists($document_root.$requested_uri)){ // and the requested file doesn't exist either
- header("Status: 404 Not Found");
- exit();
- }
- /* there isn't a cookie (likely no JS available) */
- if($mobile_first !== TRUE) { // We want to send the original resolution image if JS is disabled
- sendImage($document_root.$requested_uri,$mime_type,$browser_cache);
- }
- else { // We want to send the mobile resolution if JS is disabled
- sort($resolutions); // make sure the supplied break-points are in ascending size order
- $resolution = $resolutions[0]; // we only want the smallest supported break-point (the mobile resolution)
-
- if(file_exists($document_root."/$cache_path/$resolution/".$requested_uri)) { // it exists cached at that size
- sendImage($document_root."/$cache_path/$resolution/".$requested_uri,$mime_type,$browser_cache);
- }
- else { // it doesn't exist at that size cached
- if($watch_cache) { // if cache watching is enabled, compare cache and source modified dates to ensure the cache isn't stale
- $cache_date = filemtime($document_root."/".$cache_path."/".$resolution."/".$requested_uri);
- $source_date = filemtime($document_root.$requested_uri);
-
- if($cache_date < $source_date) { // the source file has been replaced since the cache was generated
- // Check the image dimensions
- $source_image = $document_root.$requested_uri;
- $dimensions = GetImageSize($source_image);
- $width = $dimensions[0];
- $height = $dimensions[1];
-
- // Do we need to downscale the image?
- if($width <= $resolution) { // no, because the width of the source image is already less than the client width
- sendImage($document_root.$requested_uri);
- }
-
- // We need to resize the source image to the width of the resolution breakpoint we're working with
- $ratio = $height/$width;
- $new_width = $resolution;
- $new_height = ceil($new_width * $ratio);
-
- switch ($extension){
- case png:
- $src = @ImageCreateFromPng($source_image); // original image
- break;
- case gif:
- $src = @ImageCreateFromGif($source_image); // original image
- break;
- default:
- $src = @ImageCreateFromJpeg($source_image); // original image
- break;
- }
-
- $dst = ImageCreateTrueColor($new_width,$new_height); // re-sized image
- ImageCopyResampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height); // do the resize in memory
-
- // sharpen the image?
- if($sharpen == TRUE) {
- $intSharpness = findSharp($width, $new_width);
- $arrMatrix = array(
- array(-1, -2, -1),
- array(-2, $intSharpness + 12, -2),
- array(-1, -2, -1)
- );
- imageconvolution($dst, $arrMatrix, $intSharpness, 0);
- }
-
- // check the path directory exists and is writable
- $directories = str_replace("/$requested_file","",$requested_uri); // get the directories only
- $directories = substr($directories,1); // clean the string
-
- if(!is_dir("$document_root/$cache_path/$resolution/$directories")){ // does the directory exist already?
- if (!mkdir("$document_root/$cache_path/$resolution/$directories", 0777, true)) { // make the directory
- // uh-oh, failed to make that directory
- ImageDestroy($src); // clean-up after ourselves
- ImageDestroy($dst); // clean-up after ourselves
-
- /* notify the client by way of throwing a message in a bottle, as that's all we can do */
- $im = ImageCreateTrueColor(800, 200);
- $text_color = ImageColorAllocate($im, 233, 14, 91);
- ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
- header("Pragma: public");
- header("Cache-Control: maxage=".$browser_cache);
- header('Expires: '.gmdate('D, d M Y H:i:s', time()+$browser_cache).' GMT');
- header('Content-Type: image/jpeg');
- ImageJpeg($im); ImageDestroy($im);
- exit();
- }
- }
-
- // save the new file in the appropriate path, and send a version to the browser
- switch ($extension){
- case png:
- $gotSaved = ImagePng($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file");
- break;
- case gif:
- $gotSaved = ImageGif($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file");
- break;
- default:
- $gotSaved = ImageJpeg($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file", $jpg_quality);
- break;
- }
-
- if(!$gotSaved) {
- /* Couldn't save image, notify the client by way of throwing a message in a bottle, as that's all we can do */
- $im = ImageCreateTrueColor(800, 200);
- $text_color = ImageColorAllocate($im, 233, 14, 91);
- ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
- header('Content-Type: image/jpeg');
- ImageJpeg($im); ImageDestroy($im);
- exit();
- }
- else { // we saved the image to cache, now deliver the image to the client
- ImageDestroy($src); ImageDestroy($dst);
- sendImage("$document_root/$cache_path/$resolution/$directories/$requested_file",$mime_type,$browser_cache);
- }
- }
- } // end of if watch-cache
- } // end it doesn't exist at the mobile size cached
- }
-}
-
-$client_width = $_COOKIE["resolution"]; // store the cookie value in a variable
-
-/* check the cookie value makes sense */
-if (!is_numeric($client_width)){ // nope, that's not a numeric value
- setcookie("resolution", "", time() -1); // delete the mangled cookie
-
- /* now check to see if the requested file exists */
- if (!file_exists($document_root.$requested_uri)){ // the requested file doesn't exist
- header("Status: 404 Not Found");
- exit();
- }
-
- // cookie was mangled so we don't know the client width, but the requested original image exists. Serve that.
- sendImage($document_root.$requested_uri,$mime_type,$browser_cache);
-}
-
-/* the client width in the cookie is valid, now fit that number into the correct resolution break point */
-rsort($resolutions); // make sure the supplied break-points are in reverse size order
-$resolution = $resolutions[0]; // by default it's the largest supported break-point
-
-foreach ($resolutions as $break_point) { // filter down
- if($client_width <= $break_point) {
- $resolution = $break_point;
- }
-}
-
-/* Use the resolution value as a path variable and check to see if an image of the same name exists at that path */
-if(file_exists($document_root."/$cache_path/$resolution/".$requested_uri)) { // it exists cached at that size
-
- if($watch_cache) { // if cache watching is enabled, compare cache and source modified dates to ensure the cache isn't stale
- $cache_date = filemtime($document_root."/".$cache_path."/".$resolution."/".$requested_uri);
- $source_date = filemtime($document_root.$requested_uri);
-
- if($cache_date < $source_date) { // the source file has been replaced since the cache was generated
- // Check the image dimensions
- $source_image = $document_root.$requested_uri;
- $dimensions = GetImageSize($source_image);
- $width = $dimensions[0];
- $height = $dimensions[1];
-
- // Do we need to downscale the image?
- if($width <= $resolution) { // no, because the width of the source image is already less than the client width
- sendImage($document_root.$requested_uri);
- }
-
- // We need to resize the source image to the width of the resolution breakpoint we're working with
- $ratio = $height/$width;
- $new_width = $resolution;
- $new_height = ceil($new_width * $ratio);
-
- switch ($extension){
- case png:
- $src = @ImageCreateFromPng($source_image); // original image
- break;
- case gif:
- $src = @ImageCreateFromGif($source_image); // original image
- break;
- default:
- $src = @ImageCreateFromJpeg($source_image); // original image
- break;
- }
-
- $dst = ImageCreateTrueColor($new_width,$new_height); // re-sized image
- ImageCopyResampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height); // do the resize in memory
-
- // sharpen the image?
- if($sharpen == TRUE) {
- $intSharpness = findSharp($width, $new_width);
- $arrMatrix = array(
- array(-1, -2, -1),
- array(-2, $intSharpness + 12, -2),
- array(-1, -2, -1)
- );
- imageconvolution($dst, $arrMatrix, $intSharpness, 0);
- }
-
- // check the path directory exists and is writable
- $directories = str_replace("/$requested_file","",$requested_uri); // get the directories only
- $directories = substr($directories,1); // clean the string
-
- if(!is_dir("$document_root/$cache_path/$resolution/$directories")){ // does the directory exist already?
- if (!mkdir("$document_root/$cache_path/$resolution/$directories", 0777, true)) { // make the directory
- // uh-oh, failed to make that directory
- ImageDestroy($src); // clean-up after ourselves
- ImageDestroy($dst); // clean-up after ourselves
-
- /* notify the client by way of throwing a message in a bottle, as that's all we can do */
- $im = ImageCreateTrueColor(800, 200);
- $text_color = ImageColorAllocate($im, 233, 14, 91);
- ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
- header("Pragma: public");
- header("Cache-Control: maxage=".$browser_cache);
- header('Expires: '.gmdate('D, d M Y H:i:s', time()+$browser_cache).' GMT');
- header('Content-Type: image/jpeg');
- ImageJpeg($im); ImageDestroy($im);
- exit();
- }
- }
-
- // save the new file in the appropriate path, and send a version to the browser
- switch ($extension){
- case png:
- $gotSaved = ImagePng($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file");
- break;
- case gif:
- $gotSaved = ImageGif($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file");
- break;
- default:
- $gotSaved = ImageJpeg($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file", $jpg_quality);
- break;
- }
-
- if(!$gotSaved) {
- /* Couldn't save image, notify the client by way of throwing a message in a bottle, as that's all we can do */
- $im = ImageCreateTrueColor(800, 200);
- $text_color = ImageColorAllocate($im, 233, 14, 91);
- ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
- header('Content-Type: image/jpeg');
- ImageJpeg($im); ImageDestroy($im);
- exit();
- }
- else { // we saved the image to cache, now deliver the image to the client
- ImageDestroy($src); ImageDestroy($dst);
- sendImage("$document_root/$cache_path/$resolution/$directories/$requested_file",$mime_type,$browser_cache);
- }
- }
- } // end of if watch-cache
-
- sendImage($document_root."/$cache_path/$resolution/".$requested_uri,$mime_type,$browser_cache);
-}
-
-/* It doesn't exist as a cached file, check the default image folder to see if it exists there */
-if (!file_exists($document_root.$requested_uri)){ // the file doesn't exist at the original size either
- header("Status: 404 Not Found");
- exit();
-}
-
-/* It exists as a source file, so lets work with that: */
-
-// Check the image dimensions
-$source_image = $document_root.$requested_uri;
-$dimensions = GetImageSize($source_image);
-$width = $dimensions[0];
-$height = $dimensions[1];
-
-// Do we need to downscale the image?
-if($width <= $resolution) { // no, because the width of the source image is already less than the client width
- sendImage($document_root.$requested_uri,$mime_type,$browser_cache);
-}
-
-// We need to resize the source image to the width of the resolution breakpoint we're working with
-$ratio = $height/$width;
-$new_width = $resolution;
-$new_height = ceil($new_width * $ratio);
-
-switch ($extension){
- case png:
- $src = @ImageCreateFromPng($source_image); // original image
- break;
- case gif:
- $src = @ImageCreateFromGif($source_image); // original image
- break;
- default:
- $src = @ImageCreateFromJpeg($source_image); // original image
- break;
-}
-
-$dst = ImageCreateTrueColor($new_width,$new_height); // re-sized image
-ImageCopyResampled($dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height); // do the resize in memory
-
-// sharpen the image?
-if($sharpen == TRUE) {
- $intSharpness = findSharp($width, $new_width);
- $arrMatrix = array(
- array(-1, -2, -1),
- array(-2, $intSharpness + 12, -2),
- array(-1, -2, -1)
- );
- imageconvolution($dst, $arrMatrix, $intSharpness, 0);
-}
-
-// check the path directory exists and is writable
-$directories = str_replace("/$requested_file","",$requested_uri); // get the directories only
-$directories = substr($directories,1); // clean the string
-
-if(!is_dir("$document_root/$cache_path/$resolution/$directories")){ // does the directory exist already?
- if (!mkdir("$document_root/$cache_path/$resolution/$directories", 0777, true)) { // make the directory
- // uh-oh, failed to make that directory
- ImageDestroy($src); // clean-up after ourselves
- ImageDestroy($dst); // clean-up after ourselves
-
- /* notify the client by way of throwing a message in a bottle, as that's all we can do */
- $im = ImageCreateTrueColor(800, 200);
- $text_color = ImageColorAllocate($im, 233, 14, 91);
- ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
- header("Pragma: public");
- header("Cache-Control: maxage=".$browser_cache);
- header('Expires: '.gmdate('D, d M Y H:i:s', time()+$browser_cache).' GMT');
- header('Content-Type: image/jpeg');
- ImageJpeg($im); ImageDestroy($im);
- exit();
- }
-}
-
-// save the new file in the appropriate path, and send a version to the browser
-switch ($extension){
- case png:
- $gotSaved = ImagePng($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file");
- break;
- case gif:
- $gotSaved = ImageGif($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file");
- break;
- default:
- $gotSaved = ImageJpeg($dst, "$document_root/$cache_path/$resolution/$directories/$requested_file", $jpg_quality);
- break;
-}
-
-if(!$gotSaved) {
- /* Couldn't save image, notify the client by way of throwing a message in a bottle, as that's all we can do */
- $im = ImageCreateTrueColor(800, 200);
- $text_color = ImageColorAllocate($im, 233, 14, 91);
- ImageString($im, 1, 5, 5, "Failed to create directories: $document_root/$cache_path/$resolution/$directories", $text_color);
- header('Content-Type: image/jpeg');
- ImageJpeg($im); ImageDestroy($im);
- exit();
-}
-else { // we saved the image to cache, now deliver the image to the client
- ImageDestroy($src); ImageDestroy($dst);
- sendImage("$document_root/$cache_path/$resolution/$directories/$requested_file",$mime_type,$browser_cache);
-}
-?>
View
9 ai-cookie.php
@@ -1,9 +0,0 @@
-<?php
-$maxwidth = $_GET['maxwidth'];
-if($maxwidth == "unknown") { $maxwidth = 3000; } // we need a number, so give it something unfeasable
-setcookie('resolution',$maxwidth,time()+604800,'/'); // set the cookie
-
-// respond with a (fake) blank image
-header('content-type: image/jpeg');
-exit();
-?>
View
62 instructions.htm
@@ -19,14 +19,18 @@
<body>
<h1>Adaptive-Images Instructions</h1>
+ <h2>NOTICE</h2>
+ The following instructions were written by Matt Wilcox for the Adaptive Images project (http://adaptive-images.com/). This is my ColdFusion port of his project.
+ I've modified his instructions a bit where it makes sense to, but otherwise the text is his. The section that handled non-JavaScript support was removed from
+ this version.
+
<h2>Basic instructions</h2>
- <p>Copy <code>adaptive-images.php</code> and <code>.htaccess</code> into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT, skip down to the advanced instructions.</p>
+ <p>Copy <code>adaptive-images.cfm</code> and <code>.htaccess</code> into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT, skip down to the advanced instructions.</p>
<p>Create a directory called <code>ai-cache</code> in the root of your site and give it write permissions (CHMOD 777).</p>
<p>Copy the following Javascript into the &lt;head&gt; of your site. It MUST go in the head because it needs to work before the page has finished loading, and before any images have been requested.</p>
<pre><code>&lt;script&gt;var device_width=screen.width;var device_height=screen.height;if(device_width>device_height){ai_width=device_width;}else{ai_width=device_height;}
document.cookie='resolution='+ai_width+'; expires=; path=/';&lt;/script&gt;</code></pre>
<p>That's it, you're done.</p>
- <p>NOTE: you do not need the <code>ai-cookie.php</code> file unless you are using the <a href="#alternate">alternate method</a> of detecting the users screen size. So delete it if you like, no one likes mess.</p>
<h2>You already have a .htaccess file</h2>
<p>I strongly advise you to duplicate that file so you can revert to it if things go pear-shaped.</p>
@@ -44,7 +48,7 @@
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
-RewriteRule \.(jpg|jpeg|gif|png) adaptive-images.php
+RewriteRule \.(jpg|jpeg|gif|png) adaptive-images.cfm
# END Adaptive-Images -------------------------------------------------------------------------------</code></pre>
@@ -64,7 +68,7 @@
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
- RewriteRule \.(jpg|jpeg|gif|png) adaptive-images.php
+ RewriteRule \.(jpg|jpeg|gif|png) adaptive-images.cfm
# END Adaptive-Images -------------------------------------------------------------------------------
&lt;/IfModule&gt;</code></pre>
@@ -74,28 +78,23 @@
<p>Instructions are in the file as comments (any line that starts with a # is a comment, and doesn't actually do anything)</p>
<p>Follow the instructions inside that code to specify any directories you don't want to use Adaptive-Images on.</p>
- <h3>PHP</h3>
- <p>You can now open the php file and have a play with the settings that are in the CONFIG area. By default it looks like this:</p>
+ <h3>CFM</h3>
+ <p>You can now open the cfm file and have a play with the settings that are in the CONFIG area. By default it looks like this:</p>
<pre><code>/* CONFIG ----------------------------------------------------------------------------------------------------------- */
-$resolutions = array(1382,992,768,480,320); // the resolution break-points to use (screen widths, in pixels)
-$cache_path = "ai-cache"; // where to store the generated re-sized images. This folder must be writable.
-$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
-$sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
-$watch_cache = TRUE; // check that the responsive image isn't stale (ensures updated source images are re-cached)
-$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
-$mobile_first = FALSE; // If there's no cookie deliver the mobile version (if FALSE, delivers original resource)
+resolutions = [1382,992,768,480,320]; // the resolution break-points to use (screen widths, in pixels)
+cache_path = "ai-cache"; // where to store the generated re-sized images. This folder must be writable.
+jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100
+sharpen = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
+watch_cache = TRUE; // check that the responsive image isn't stale (ensures updated source images are re-cached)
+browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
+mobile_first = FALSE; // If there's no cookie deliver the mobile version (if FALSE, delivers original resource)
/* END CONFIG ----------------------------------------------------------------------------------------------------------
------------------------ Don't edit anything after this line unless you know what you're doing -------------------------
--------------------------------------------------------------------------------------------------------------------- */</code></pre>
- <p><code>$resolutions</code> are the screen widths we'll work with. In the default it will store a re-sized image for large screens, normal screens, tablets, phones, and tiny phones.</p>
- <p>In general, if you're using a responsive design in CSS, these breakpoints will be exactly the same as the ones you use in your media queries.</p>
- <p><code>$cache_path</code> If you don't like the cached images being written to that folder, you can put it somewhere else. Just put the path to the folder here and make sure you create it on the server.</p>
- <p><code>$sharpen</code> Will perform a subtle sharpening on the rescaled images. Usually this is fine, but you may want to turn it off if your server is very very busy.</p>
- <p><code>$watch_cache</code> If your server gets very busy it may help performance to turn this to FALSE. It will mean however that you will have to manually clear out the cache directory if you change a resource file</p>
- <p><code>$mobile_first</code> [BETA FEATURE] Adhere to the Mobile First philosophy. If set to TRUE and no cookie is set Adaptive Images will send the mobile-resolution version of the requested image. If set to FALSE it will send the original resource. There is a known problem with Firefox on a first visit to a site where $mobile_first is TRUE. It doesn't set the cookie fast enough, so the very first load sends the mobile size image. All page loads after are fine. Opera, Safari, and Chrome all work OK.</p>
+
<h3>JavaScript</h3>
<p>If you like, here's the long-hand version, so you can understand what the JS is doing. Don't use this one in your real site, though the code is doing the same thing:</p>
@@ -115,29 +114,6 @@
document.cookie = 'resolution='+ri_width+'; expires=; path=/'; // set or update the cookie
&lt;/script&gt;</code></pre>
-<h2 id="alternate">Alternate method for those who can't rely on JavaScript</h2>
-
-<p>One of the weaknesses of the Adaptive Images process is its reliance on JavaScript to detect the visitors screen size, and set a cookie with that screen size inside it. The following is a solution for people who need the system to work without the use of JavaScript, but it does have a major caveat which is why this is not the default method, and why it is "unsupported" (I'm not going to troubleshoot problems you have with this method).</p>
-
-<h3>The alternative method</h3>
-<p>Do not use the JavaScript as explained above, but instead, ABOVE your normal CSS, add the following into the head:</p>
-<pre><code>&lt;style&gt;
- @media only screen and (max-device-width: 479px) {
- html { background-image:url(ai-cookie.php?maxwidth=479); } }
- @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
- html { background-image:url(ai-cookie.php?maxwidth=767); } }
- @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
- html { background-image:url(ai-cookie.php?maxwidth=991); } }
- @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
- html { background-image:url(ai-cookie.php?maxwidth=1381); } }
- @media only screen and (min-device-width: 1382px) {
- html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
-&lt;/style&gt;</code></pre>
-<p>If you use this method you will need to ensure the widths here match those in your adaptive-images.php file, you will also need to have the <code>ai-cookie.php</code> file in the root of your website (no one else needs this file).</p>
-
-<h3>The caveat</h3>
-<p>Using this method instead of the JS method makes it likely that on the very first visit to your site, the images sent to the visitor will be the original full-scale versions. However, ALL subsequent pages on your site will work properly.</p>
-<p>The reason is to do with how browsers load web pages. The first thing a browser does is load the HTML, in the order it's written - so for a normal AI install it loads the HTML and see's the embeded JavaScript, and immediately executes that JavaScript - which immediately writes the cookie. It then carries on loading the rest of the page in the order it finds it. Long story short - it means that when it finds an image tag and asks the server for it, it already has a cookie stored.</p>
-<p>That's not likely to be the case if you use the CSS method. Because the CSS method relies on an external file - it has to ask the server for the "background-image", which is really just a bit of PHP to set a cookie. The problem is that when a browser loads external files like that, it doesn't stop loading the HTML, it carries on doing that at the same time as waiting for the external file. Which means that it can get to an image tag before the server has finished loading that PHP file. Which means no cookie is set. Which means the original full-resolution image is sent. But, only on that very first page load.</p>
+
</body>
</html>
View
6 readme.txt
@@ -0,0 +1,6 @@
+This is a ColdFusion port of the Adaptive Images project by Matt Wilcox. You can find
+his web site for the project here:
+
+http://adaptive-images.com/
+
+Credit for all of this goes to him - I just rewrote it in ColdFusion.

0 comments on commit f2d30ff

Please sign in to comment.
Something went wrong with that request. Please try again.