Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Adaptive images
I installed the Adapative Images script on both a flat site and a Textpattern site a while back, but having recently checked, the Textpattern site one isn’t actually working (the one on my flat site works fine).
Is there anything in the .htaccess code below that would clash with the Textpattern .htaccess code?
# ----------------------------------------------------------------------
# Adaptive Images - http://adaptive-images.com
# ----------------------------------------------------------------------
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !ignore-this-directory
# RewriteCond %{REQUEST_URI} !and-ignore-this-directory-too
RewriteCond %{REQUEST_URI} !textpattern
# don't apply the AI behaviour to images inside AI's cache folder:
RewriteCond %{REQUEST_URI} !ai-cache
# 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
</IfModule>Offline
Offline
Re: Adaptive images
So it’s bad and not to be used then, yes?
Offline
Offline
Re: Adaptive images
OK then. Thanks for the warning.
Offline
Re: Adaptive images
Adaptive Images is one of two recommended methods for creating images for responsive sites.
Can you explain further why it’s a bad idea to implement it? What is the security risk? And what is the impact?
Offline
Re: Adaptive images
I tried an alternative way (without that script from adaptive-images.com) for creating adaptive images in Textpattern.
This method requires:
- a javascript snippet that creates a cookie holding the screen-resolution
- some additions to the .htaccess file in the site-root
- the famous smd_thumbnail plugin
Say, you want to deliver images for devices with a screen width less or equal to 480 px, 768 px and for larger displays.
You need to create two profiles in smd_thumbnail with the names w480 and w768 and the width set to 480 and 768 px.
Then scale your original images down to the width you want to use for large displays, e.g. 1200 px (or something else ) wide. Do this on your Desktop and then upload the image(s) as usual. On upload, smd_thumbnail then creates images for all defined profiles in directories below the images folder, e.g. images/w480/123.jpg.
After that, you can write the js snippet to create the “resolution” cookie. Using the values from above, the snippet looks like this:
<script>
var r = Math.max(screen.width, screen.height);
if (r <= 480) r = 480; else if (r <= 768) r = 768;
document.cookie='resolution='+r+'; path=/';
</script>Add this snippet at the top of the head-section in your page-template.
Then add these lines to the htaccess in the site-root (just after the RewriteBase):
RewriteCond %{REQUEST_FILENAME} .*\.(gif|jpg|jpeg|png)$ [NC]
RewriteCond %{REQUEST_URI} !(w480|w768)
RewriteCond %{REQUEST_URI} images
RewriteCond %{HTTP_COOKIE} resolution=([^;]+)
RewriteCond %1 ^(480|768)$
RewriteRule ^images/(.*)$ images/w%1/$1This will serve images from the images subfolders, if the cookie is set to 480 or 768. Otherwise, the default images are served from the images folder (default behaviour).
There is one thing I currently don’t know how to do it: Testing if the file (images/w%1/$1) exists in the subfolder, before actually doing the rewrite.
A problem may occur, if you use background-images in your layout from the images folder.
The method is not perfect, but I think it works for many cases. And it does not require you to make any changes to the image-url’s in your templates and forms.
Offline
Pages: 1