Change images and icons

Many of our themes support images and icons for categories, sections and articles. Theme settings cannot be used because it’s impossible to know ahead of time how many there will be in a given Help Center, so this guide walks you through how to apply custom images and icons in your theme.

In most cases, the process for adding or updating images involves two steps

  • Add your images

    The first step is to add your images to the theme’s assets/ folder, which you can do directly by copying files into the directory before the theme is imported into Zendesk or through the Zendesk Guide Theming Center.

  • Update your templates

    Once your images have been added you can reference them in your page templates by using the {{asset}} helper.

    It accepts only 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.

    Zendesk’s Curlybars is similar to Handlebars and allows you to reference the current loop index within an {{each}} loop using @index. This allows you to link images to categories or other Help Center properties using their position.

    For example, the following code loops though categories on the Home page and generates the image src attribute using the @index property:

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

    Because the index starts at 0, to have the images appear you just need to ensure they adopt the following naming convention in the assets/ folder:

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

    Of course you can choose to use other properties with the {{asset}} helper. Using id would allow you to use each category ID as a reference instead.

For more complex use-cases our Images plugin is available.

Questions or feedback about this guide? Let us know