Question

I’m re-writing a website that will support multiple skins. Currently, I’m just planning on allowing images and CSS to be modified, but the underlying HTML will not change. And if the skin does not modify an image or CSS file, it inherits that file from the base skin.

With that in mind, here are the 3 ways I’ve considered so far for serving up skin-dependent files:

1. Wrap all skin-specific requests requests in the view with a lookup function, ie:

    <img src="<?php get_skin_file('/images/header.png', 'skin1'); ?>" />

    function get_skin_file($file, $skin) {
        $skin_file = '/' . $skin . '/' . $file;
        if(is_readable($skin_file)) return $skin_file;
        return '/default/' . $file;
    }

2. Have php serve the image

   <img src="/header.png.php?skin=skin1" />

3. Always attempt to load the skin file and if it doesn’t exist, use ModRewrite to send the result to a php handler script:

   <img src="/skin1/header.png" />

Number 2 is what I’d like to do, but I’m just concerned with the performance implications of having PHP serve up basically every image file.

My userbase is small enough (about 30k users) that I don’t think it’d really be an issue, but I’d also just like to learn what other folks do in this situation.

Thanks.

EDIT: I have no idea why my code is not formatted properly. I hit the code button and checked that it’s 4 spaces, but it’s still ugly. Sorry about that.

Answer 1

I wound up going with a variation of option 2. I’m having apache look for url patterns and if a skin-replaceable url is present, the request is routed to my skin image select script.

Here is the relevant apache config:

<Directory /var/www/website>
  RewriteEngine on
  RewriteBase /

  RewriteCond %{REQUEST_URI} \.select.(png|jpg|gif|txt|css)$ [NC]
  RewriteRule ^(.*)$ index.php?mode=select&q=$1 [L,QSA]
</Directory>

Here is the PHP code from the file that renders the image:

<?php
preg_match("%^(?P<path>.+)\.select\.(?P<ext>(jpg|gif|png|txt|css))$%", $_REQUEST['q'], $matches);

$base = '/' . $matches['path'] . '.' . $matches['ext'];

$file = '/skins/' . App::get('skin') . '/' . $base;

if(is_readable($file)) {
  header('Content-type: image/' . $matches['ext']);
  header('Content-Transfer-Encoding: binary');
  header('Content-Length: ' . filesize($file)+1);
  readfile($file);
  exit();
}
//custom file isn't available, so load the default
$file = '/skins/default/' . $base;
header('Content-type: image/' . $matches['ext']);
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($file)+1);
readfile($file);
exit();
?>

so for any asset in my view that needs to be skin-aware, I load it like:

<img src="/images/header.select.png" />

and apache catches it and sends it to my handler script.

Thanks for your help on that. Both of the other 2 suggestions provided stmpy and Charles would also work, but this was the ideal solution for me. As a bonus of doing it this way, I can also replace images in css and what not dynamically without custom css files. My application will largely consist of just replacing the primary background, so all that will be necessary for my themes, for the most part will just be creating a new skin folder and uploading one background image.