Can I add a query string to asset URL when using css()

The CMS Questions
1

Hi.

I want to add a version/timestamp query string to the end of my CSS and JS asset URLs. I have been using <?= css('assets/styles.min.css') ?> in the head tag but I can’t figure out if I can append a query string using that method.

So, for now I have switched to <link href="https://.../assets/styles.css?v=<?php echo time(); ?>" rel="stylesheet">. That works but, of course, means that I have to hard code the absolute URL.

(I have tried a couple of plugins but they seem to add the timestamp to the actual filename rather than adding a query string. And I couldn’t find anything in the Forum that was basic enough for me!)

Is there a way to add a query string whilst still using the css() method?

Thanks.

2 
<?= css('assets/styles.min.css') . '?v=' . time() ?>

But you don’t really want use time() to create a new version on every reload, do you?

3

Thanks, Sonja.

No, you’re right, I shouldn’t have used ‘time’. I want to add the timestamp of last file modification. I think I might need to return to one of the plugins but learn how to configure the .htaccess REWRITE COND to place the timestamp as a query string.

For example, the .htaccess condition supplied with the Cachebuster plugin generates the filename as…

styles.min.1694636820.css

but what I want to achieve is…

styles.min.css?v=1694636820

If you have a suggestion other than me learning more about .htaccess formatting, I’d be very grateful.

4

I have two solutions for you which i use.

1) Out of the box

<?= css(['assets/css/style.css?ver=' . filemtime("assets/css/style.css") . '', '@auto']); ?>

But you have to put the path two times

OR

2) With plugin

<?= css('assets/css/style.css') ?>

From the docs: CSS URLs | Kirby CMS
Additional i needed to put this before to work:
use Kirby\Cms\App;
use Kirby\Cms\Url;

5

You can also use the plugin from the getkirby.com repo, which creates the output the way you want:

6

Thanks so much, slgdev. Your out of the box solution is exactly what I was after.

1 Like
7

Thanks, Sonja. I’ll keep this solution in mind for possible future use.

8

Here is also an updated Version for Kirby 4.5+ and PHP 8.3+

<?php
use Kirby\Cms\App;
use Kirby\Http\Url;
use Kirby\Filesystem\F;

Kirby::plugin('my/css', [
    'components' => [
        'css' => function (App $kirby, string $url, $options = null): string {
            $relative_url = Url::path($url, false);
            // Use DIRECTORY_SEPARATOR PHP constant instead of DS
            $file_root = $kirby->root('index') . DIRECTORY_SEPARATOR . $relative_url;
            
            if (F::exists($file_root)) {
                return url($relative_url . '?' . F::modified($file_root));
            }
            
            return $url;
        }
    ]
]);
1 Like