Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
119 lines (91 sloc) 6.26 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
body {
width : 90%; margin : 1em auto;
background : #333; color : #aaa; font : 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 {
color : #fff; }
p code { color : #99e; }
pre > code { display : block; padding : 1em; border : 1px solid #999; }
:target { background-color : #000;}
a,a:visited{ color : #99f; }
</style>
</head>
<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.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>
<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>
<p>Open your existing .htaccess file and edit the contents. You'll need to look and see if there is a section that begins with the following:</p>
<p><code>&lt;IfModule mod_rewrite.c&gt;</code></p>
<p>If there is, then you need to add the following lines into that block:</p>
<pre><code># Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory
RewriteCond %{REQUEST_URI} !assets
# 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.cfm
# END Adaptive-Images -------------------------------------------------------------------------------</code></pre>
<p>If you don't have a code block then simply copy and paste the following into your file instead:</p>
<pre><code>&lt;IfModule mod_rewrite.c&gt;
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images -----------------------------------------------------------------------------------
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory
RewriteCond %{REQUEST_URI} !assets
# 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.cfm
# END Adaptive-Images -------------------------------------------------------------------------------
&lt;/IfModule&gt;</code></pre>
<h2>Additional settings and configuration</h2>
<h3>.htaccess</h3>
<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>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 = [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>
<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>
<pre><code>&lt;script&gt;
/* we want to get the image for the largest window size the device can support, not just the current window size */
var device_width = screen.width; // get screen width
var device_height = screen.height; // get the screen height
/* if this is a device that can rotate, we need the longest edge, not just the current width */
if (device_width > device_height) {
ri_width = device_width;
} else {
ri_width = device_height;
}
/* set the client width in a cookie for the server to read */
document.cookie = 'resolution='+ri_width+'; expires=; path=/'; // set or update the cookie
&lt;/script&gt;</code></pre>
</body>
</html>