autoversioning image links INSIDE css and javascript files?

Question

Hi folks!

Inside my PHP application, I'm already successfully autoversioning my static content (CSS, JS, and images), so my URLs look something like this:

<link rel="stylesheet" href="http://example.com/include/css/global.1262063295.css" type="text/css" media="all" />
<img src="http://example.com/images/logo.1254284339.png" alt="" />

The 10-digit version numbers are simply the modification Unix timestamp of the individual files. This is achieved with mod_rewrite and some basic PHP code (see http://particletree.com/notebook/automatically-version-your-css-and-javascript-files/). So far so good.

---

HOWEVER, here's my problem.

Inside my CSS file, I have links to many background images:

background: url("http://example.com/images/dice.gif") no-repeat right top;

Similarly in my JS files, I reference different images as well.

Since I want all access to my static content (css, js, images) to have the version number included, is there any way to automatically update the links INSIDE a .css or .js file so the above css would look like this:

background: url("http://example.com/images/dice.1234567893.gif") no-repeat right top;

How can this be done automatically?

Thanks, Konstantin

Answer 1

You can serve your CSS and JS files through PHP as well. For example, rename global.css to global.css.php. Make sure to send to correct HTTP response headers.

<?php // global.css.php
header('Content-Type:text/css; charset:utf-8');
include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php'); ?>

#cssrule { background: url(<?php autoVer('/img/background.gif') ?>); }