How-to add rewrite rules to point the uploads folder to a subdomain

The goal

Point the upload-folder to a static subdomain to serve adaptive images, that can get cached.

Read More

WordPress Rewrite Rules

You can read more in detail about rewrite rules API at Christopher Davis site.

The how-to on adaptive-images.php

Those are the steps needed (just to make the Q complete):

  1. The HTML starts to load in the browser and a snippet of JS in the writes a session cookie, storing the visitor’s screen size in pixels.
  2. The browser then encounters an tag and sends a request to the server for that image. It also sends the cookie, because that’s how browsers work.
  3. Apache receives the request for the image and immediately has a look in the website’s .htaccess file, to see if there are any special instructions for serving files.
  4. There are! The .htaccess says “Dear server, any request you get for a JPG, GIF, or PNG file please send to the adaptive-images.php file instead.”

The PHP file then does some intelligent thinking which can cover a number of scenario’s but I’ll illustrate one path that can happen:

  1. The PHP file looks for a cookie and finds that the user has a maximum screen size of 480px.
  2. It compares the cookie value with all $resolution sizes that were configured, and decides which matches best. In this case, an image maxing out at 480px wide.
  3. It then has a look inside the /ai-cache/480/ folder to see if a rescaled image already exists.
  4. We’ll pretend it doesn’t – the PHP then goes to the actual requested URI to find the original file.
  5. It checks the image width. If that’s smaller than the user’s screen width it sends the image.
  6. If it’s larger, the PHP creates a down-scaled copy and saves that into the /ai-cache/480/ folder ready for the next time it’s needed. It and also sends it to the user.

The question

How would I set up the rewrite rules to point a subdomain to the the uploads folder and vice versa?

Thanks.

Related posts

Leave a Reply

3 comments

  1. If you are not willing to filter only image uploads, i.e., all uploaded media will reside in the same folder/subdomain, then there’s a simple configuration solution:

    • go to options-media.php
    • set the Store uploads option to wp-content/uploads
    • set the Full URL option to http://uploads.yourdomain.com
    • create a subdomain making the uploads folder be http://uploads.yourdomain.com
  2. I am definitely no expert in htaccess, but with a bit of research I found something that I believe would be a good starting point for what you want:

    RewriteCond %{HTTP_REFERER} !^http(s)?://(.+).adaptive-images. [NC]
    RewriteRule ^(.*).(gif|jpe?g|png)$ http://www.adaptive-images.com?url=$1.$2 [R,NC,L]
    

    The idea of the first line is to prevent adaptive-images.com from getting snagged up in the rule, otherwise it would be a recursive call back to adaptive-images, which I assume you do not want.

    Credit goes to corz.org for this – the page on htaccess is excellent.

    Have you considered running a bit of ajax to do what you want instead? Your level of control might be much higher over what you want to control.

  3. The techniqe you’re looking for is RedirectMatch

    Either of the following should acheive what you want, steps 1 and 2 are irrelevant to the answer this simply redirects any request for a file ending in .jpg, .gif or .png to the php file.

    RedirectMatch .(png|gif|jpg)$ http://example.com/cache.php
    

    Or using RewriteRule:-

    RewriteRule .(png|gif|jpg)$ cache.php [L]