Question

I’m playing with this combine.php file and it looks nice, but I’m wondering if there is a work around for my problem.

I now have fewer script and link tags for my resources that look and work like they’re supposed to

<script type="text/javascript" src="http://path/to/server/javascript/libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.core.min.js,libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.widget.min.js,libjs/jqueryui/1.8/development-bundle/ui/minified/jquery.ui.datepicker.min.js,libjs/plugins/cluetip/1.0.6/jquery.cluetip.js,libjs/plugins/cluetip/1.0.6/lib/jquery.hoverIntent.js,libjs/plugins/cluetip/1.0.6/lib/jquery.bgiframe.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/jquery.cluetip.css" >

however, images that are included in a stylesheet with a relative path sometimes do not appear – it depends on the order in which the stylesheets are included ie:

background: url(images/ui-bg_flat_75_ffffff_40x100.png)

The specific culprit on hand that I’m working with has to deal w/ a jqueryui datepicker script and a cluetip script.

Images for the datepicker have request urls like this one

http://path/to/server/css/libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.core.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.theme.css,libjs/jqueryui/1.8/development-bundle/themes/base/jquery.ui.datepicker.css,libjs/plugins/cluetip/1.0.6/images/ui-bg_flat_75_ffffff_40x100.png

where the image thinks the path is from the last included script (libjs/plugins/cluetip/1.0.6/), whereas its actually from an earlier script (libjs/jqueryui/1.8/development-bundle/themes/base/)

I do not want to change any of my external resources to absolute paths. Is there a workaround for this problem? is there a better way of handling this situation?

Answer 1

OK, here’s what I did. Since the combine.php file creates a compressed cache file with a unique name for the Etag header I figured I could dynamically update the image paths to an absolute path when the cache file is created. so I slightly modified the script to rewrite the relative paths into absolute paths – which allows my to keep any new/updated plugins untouched and gets me the end result I needed.

my rewrite took the portion of the combine.php file like this:

while (list(, $element) = each($elements)) {
    $path = realpath($base . '/' . $element);
    $contents .= "\n\n" . file_get_contents($path)
}

into this: (NB. $glmBaseUrl is a dynamically created url for the server this scripts are on)

while (list(, $element) = each($elements)) {
    $path = realpath($base . '/' . $element);

    $fileContents = file_get_contents($path);
    if ($type == 'css') {
        subDir = dirname($element);
        $fileContents = preg_replace(
            '/url\((.+)\)/i',
            'url(' . $glmBaseUrl . $subDir . '/$1)',
            $fileContents
        );
    }
    $contents .= "\n\nfileContents";
}