h5bp/html5-boilerplate — Issue #907: Best way to use with Adaptive Images?
Author: nosarious
Created: 2012-01-06 08:31:06+00:00
State: open

I have a website which uses the adaptive-images.php file to create properly sized images for the browser width (possibly resolution. I don't know php)

It involves editing a portion of the .htaccess file:

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 \.(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images -------------------------------------------------------------------------------

I have tried this with my website, but it fails, as I probably don't have bits or pieces in the right spots.

you can see a mockup of how it looks here: http://straathof.acadnet.ca/engineTest/

The first two images (001.jpg and 002.jpg) are very large (4000 px wide) and they should be resized to around 1300 or so.

This site is intended to be run with a cache manifest, which is working properly, even with these huge files.

You can see a properly set up system here: http://straathof.acadnet.ca/autumn2/ (basically the file before I integrated the html5boilerplate)

This project is to simulate a magazine sliding/scrolling environment for mobile devices (a few small glitches, but try it on an iPad if you like)

Gerry.