Is there any simple way to automatically add a version number when referencing a CSS file?

Example: <link href="style.css?v=VERSION-HERE" rel="stylesheet" type="text/css">

Version could be a timestamp when the style.css was last modified or something like that.

The reason for this is that I often have to tell my clients to force the browser to reload because they don't see the latest changes I've made in style.css.

If it matters, I use Deploybot and github.


There are several plugins that can do this.

With my plugin Stamp, you can add a timestamp to the filename or path in the following formats:

<script src="/assets/build/js/1399647655/scripts.js"></script>
<script src="/assets/build/js/scripts.1399647655.js"></script>
<script src="/assets/build/js/scripts.js?ts=1399647655"></script>

The last one, which is the one you're looking for is made with:

<script src="{{ craft.stamp.er('/assets/build/js/scripts.js', 'query') }}"></script> 

You can also get only the timestamp, and use it however you want, like this:

{% set timestamp = craft.stamp.er('/assets/build/js/scripts.js', 'tsonly') %} 

It's worth noting that you'd ideally want to not use a query string for this, as various frontside proxies could ignore it. But, you need to be able to set up the proper url rewriting in your webserver for the filename and folder versions, so that might not always be possible.

There is also Cache Buster from Focuslab which can add a query string, but also supports file revisioning based on a manifest file.

And there's Asset Rev from Club Studio which is primarily for file revisioning based on a manifest file, but falls back to a query string.

  • Thanks so much for this André! I will definitely use your plugin. – Magnus Nov 12 '16 at 16:21

I tend to use a config.php variable (called assetVersion) for the production site, and just generate a random value for the dev site using Twig's random function. Looks like this:

<link rel="stylesheet" href="/assets/css/style-min.css{{ craft.config.devMode ? '?v=' ~ random() : '?v=' ~ craft.config.assetVersion }}">
  • Nice, clean and simple. – Crafty Cat Aug 22 '20 at 3:59

Funny that you mention DeployBot — I actually wrote a post at DeployBot's blog about solving this exact problem with Craft, DeployBot, and Gulp.js: https://deploybot.com/blog/adding-fingerprints-to-assets-with-gulp-and-deploybot

This approach doesn't require any Craft plugins, but assumes that you use a task runner like Gulp or Grunt for building your assets.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.