theme_url

The theme_url filter prepends the URL of the theme asset with the theme path. This is useful when using images, CSS or Javascript theme assets in the theme templates. It ensure that if the path to the theme changes then the links to the theme assets won't be broken.

<link rel="stylesheet" href="{{ 'css/index.css'|theme_url }}">

The filter does not check to ensure that the asset actually exists.

If the path to the asset includes the theme path already then no change is done except to ensure that the path starts with a "/".

Cache busting

You can also have a version added to the file automatically if the CDN is enabled to force a new version to be used.

{{ '/path/to/file.css'|theme_url({version: 2}) }}

Assignment

As with all filters, you can use the filter when assigning a value to another variable.

{% set logo = 'images/logo.png'|theme_url %}

Arguments

The theme_url filter has the following signature.

theme_url(options)

Parameter Description
options

The options parameter is optional. The following values are valid:

  • version: (string)
  • append: (boolean)

Pass the options as an object hash.

version

The version option lets you add a version to the file path if the CDN is enabled to force a new version of the file to be used. By default, the version is added between the file name and the file extension.

Example:

{{ '/css/file.css'|theme_url({version: 2}) }}

That will output something like this:

https://cdn.branchcms.com/QypGwLx2Xb-10/theme/custom/css/file.2.css

If you are using the option on the Settings -> CDN page to automatically set version numbers then you can optionally exclude certain files from automatically having a version value applied to the file name. Do this by setting the version value to false.

{{ '/css/file.css'|theme_url({version: 2}) }}

append

The append option tells the system to append the version to the URL using the v parameter.

Example:

{{ '/css/file.css'|theme_url({version: 2, append: true}) }}

That will output something like this:

https://cdn.branchcms.com/QypGwLx2Xb-10/theme/custom/css/file.css?v=2

< Back to the list of filters