Theme assets

Assets are stored within the assets folder in your theme. They can be added directly, by copying files into the assets directory before a theme is imported into Zendesk, or through the Zendesk Guide Theming Center. Once added, they can be used throughout the theme.

Types

The following file types are permitted by Zendesk:

Rich content files types, such as Microsoft Word and PDFs, can be used as article attachments but cannot be theme assets.

Usage

Once you’ve added assets to your theme they can be referenced natively in page templates and stylesheets.

Templates

Using the {{asset}} helper, you can reference theme assets within page templates.

The helper accepts one parameter, the filename of the asset.

<img src="{{asset 'background-image.png'}}" alt="Background image">

The following additional attributes are supported:

• prefix (optional) adds a prefix to the filename.
• suffix (optional) adds a suffix to the filename.

Category and section images

Using these attributes, you can create dynamic references to assets for use with categories, sections or other Help Center properties. Within an {{each}} loop you can use the @index parameter, which represents the position of the object within its collection, or any other object property to dynamically generate the src attribute for an image.

For example, the following code loops though the categories collection on the Home page and generates the image src attribute using the category’s position (@index) in the collection:

{{#each categories}}
  <img class="h-8" src="{{asset @index prefix='category-' suffix='.svg'}}" alt="{{name}}">
{{/each}}

To have the images appear, they’d need to be added to the assets directory and given the following filenames:

theme/
└── assets/
  └── category-0.svg
  └── category-1.svg
  └── category-2.svg
  └── ...

To use the category ID in the filename instead of the position in the collection, you’d simply replace @index with id.

For more complex use-cases involving image assets, our Images plugin is available.

JavaScript

If you need to access one or more assets in JavaScript, you can use page templates to expose them using the {{asset}} within a <script> tag. The example below illustrates how to access the url of an image in your assets/ folder:

<script type="text/javascript">
  var backgroundImage = "{{asset 'background-image.png'}}";
</script>

Stylesheets

You can access theme assets within CSS using dynamic variables, which are generated automatically based on the asset filename. Continuing with the example above, if you wanted to access the background-image.png image URL within CSS you’d used the variable name $assets-background-image-png:

.class-name {
  background-image: url($assets-background-image-png);
}

Note the file extension is included within the generated variable name.

Alternatively you could write your custom CSS within a <style> tag in one of your page templates and use the {{asset}} helper:

<style>
  .class-name { 
    background: url("{{asset 'background-image.png'}}");
  }
</style>

Custom heading and text fonts can also be added to your theme using these variables:

@font-face {
  font-family: 'Webfont';
  src: url('$assets-webfont-eot');
  src: url('$assets-webfont-eot?#iefix') format('embedded-opentype'),
         url('$assets-webfont-woff2') format('woff2'),
         url('$assets-webfont-woff') format('woff'),
         url('$assets-webfont-ttf') format('truetype'),
         url('$assets-webfont-svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}