You can upload assets, such as images and files, to any of your help center themes.
Uploading an asset for your theme
You can upload assets such as images and files to the help center. The assets are stored in a web cache in a cloud delivery network, (CDN). Web caches reduce bandwidth requirements and server load, and improve response times.
There are a number of allowable file types for themes, see Allowable file types for theme assets.
To upload your own theme assets
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize on the theme you want to edit.
- Click Edit code.
- In the Files section, click Add new, then select Asset.
-
Browse to select your file. Theme asset names must be unique and cannot be more than 50 characters. Asset names can contain any of the following: letters, numbers, dot, minus, plus, underscore, and dash. Asset names are not case sensitive, so you cannot have an asset named asset.jpg and Asset.jpg.
The asset file is added to your list of asset files.
Allowable file types for theme assets
The following table shows the file types that are allowed as theme assets. The allowable files types for assets are limited to the file types used in the theming of a help center.
Asset type | File types allowed |
---|---|
Images | jpg, jpeg, png, gif, svg, webp, tiff, tif, bmp, ico, webm |
Fonts | woff2, woff, eot, otf, ttf, svg |
Text files | js, css, html, json, txt, xml |
Other | mp4, swf, wav, ogg. mp3 |
Rich content files types, such as Microsoft PowerPoint, Microsoft Word and PDFs, can be article attachments but cannot be theme assets.
Using uploaded assets in the theme's code
You can reference an uploaded asset in the theme's style.css file or in its templates. In style.css, you use asset path variables provided by Guide. In templates, you use the Curlybars asset helper.
Using asset variables and helpers in your code lets you easily replace the assets in the theme without editing the theme code. See Replacing an asset in your theme.
To use an uploaded asset in your theme code
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize on the theme you want to edit.
- Click Edit Code.
- In the Assets section, click the asset file you want to use.
Various expressions for the asset appear:
- Click Copy to copy the asset expression you need in the Clipboard.
- Paste the asset expression in your theme code.
Examples
style.css
.class-name {
background: url($assets-backpack2-jpeg);
}
The value assets-backpack2-jpeg
is a variable that contains the relative
path to the asset.
.hbs files
In html markup:
<img src="{{asset 'backpack2.jpeg'}}">
In a style tag:
<style>
.class-name {
background: url("{{asset 'backpack2.jpeg'}}");
}
</style>
In a script tag:
<script>
var assetsBackpack2 = "{{asset 'backpack2.jpeg'}}";
</script>
While you can insert the asset helper in a script tag in a template, you can't use it in the script.js file.
For more information on editing your theme code, see Customizing your help center theme.
Replacing an asset in your theme
Using asset variables and helpers as described in Using uploaded assets in the theme's code above lets you replace an asset in the theme dynamically without editing the theme code. You can update the theme just by selecting a new asset file on your system.
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize on the theme you want to edit.
- Click Edit code.
- In the Assets section, locate the asset file you want to replace.
- Click the options menu at the end of the asset file name, then select
Replace.
- Select a new asset on your system.
Once uploaded, the theme is updated dynamically by any variable or helper that references the asset. The change is immediate.
The asset is not replaced if you used the full URL of the asset in the HTML source of published help center pages. The link to the asset will break because replacing an asset changes the asset's published URL. As a result, avoid using the published asset URL in a theme, a page template, or an external web page.
Deleting a theme asset
You can easily delete any theme asset you're no longer using in your theme.
To delete a theme asset
- In Guide, click the Customize design icon (
) in the sidebar.
- Click Customize on the theme you want to edit.
- Click Edit code.
- In the Assets section, locate the asset file you want to delete.
- Click the options menu at the end of the asset file name, then select Delete
asset.
- Confirm that you want to delete the asset.
The asset is removed from your assets list.
31 comments
Felipe Soares
Is is possible to upload a whole folder at once? As an alternative, is it possible to upload using an FTP client?
0
Tipene Hughes
Thanks for reaching out!
Uploading a folder to the assets directory in the help center theme customization section is not possible, unfortunately. If you're wanting to upload a large volume of files at once, I'd suggest either downloading the theme entirely and placing the images directly in the assets folder, or setting up a github integration for your theme where you can manage the assets in github and have the changes updated on the site directly from the github repository.
I hope this helps! Let me know if you have any questions.
Tipene
0
Chris Fewster
Is there a way for me to add assets which match the name of the title and have those automatically inserted using
{{asset 'Card.png'}} for instead something like {{asset '{{title}}.png'}}
0
Tipene Hughes
Hi Chris,
You can make use of the prefix attribute available to the asset helper to define the file type. Then, you'd just define the filename using an object property e.g article.title. Here's how that would look:
Feel free to reach out with any questions!
Tipene
0
Louis Ross
Hi Tipene,
0
Gorka Cardona-Lauridsen
Louis Ross there is no specific folder for your instance and the assets can be loaded using the asset helper or asset path variables, but I would like to hear what your use case is so I can understand it and take it into our our considerations for improvements.
Could you tell me more about your use case?
Thanks!
0
Bharat Dave
Hi
Hope someone can help me setup a background image for my service desk. I tried to follow this article, but I cannot get it to update the background in my services desk. Please see attached. Hope someone can help thanks.![](/hc/user_images/UDtyvMMa6XPQv_Kx4DgVFA.jpeg)
![](/hc/user_images/IWWcGiHKRRGY9SgEt0jLGg.jpeg)
![](/hc/user_images/jDVoe2Mk-4uL0lyInBdIhQ.jpeg)
![](/hc/user_images/TCbjGP2jYtN_oQ4uHpuJNw.jpeg)
0
Pulkit Pandey
Hi Bharat Dave
Please add the below CSS and let me know if it solves your issue or if it's possible to share the live URL so I will dig deep into it and provide you with the exact solution to your problem.
Thanks
Pulkit
0
Bharat Dave
Hi Pulkit,
Like this? If so, It didn't work.
0
Pulkit Pandey
Hi Bharat Dave
Is it possible the share the live URL of your help center where you are implementing this so that I will look at it and give the solution for that?
Thanks
Pulkit
0
Bharat Dave
Hi Pulkit,
I found the following code that worked for me from: https://support.zendesk.com/hc/en-us/community/posts/4409515213594-Set-a-page-background-image-in-Help-Center?page=1
body {background-image:url($assets-myimagename-png);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: bottom right;}
0
Heather Firth
I've updated my theme's api to v2 but it seems as though the assets are no longer loading. I added the assets as before and added the script to the document head but it doesn't seem to load even the smallest of scripts.
0
Dylan Buckley
Heather Firth
You'll want to load scripts in to your `document_head.hbs` file as a path to the `src` attribute, like this:
1
Carrie Doring
Hello! I'd like to link to an asset in my branded agent signature, but can't get any of these expressions to work. I'm using this markdown code:
[![alt text](imageurl)](linkurl)
What should I use for the imageurl?
Thank you!
0
Gorka Cardona-Lauridsen
Hi All,
We are conducting research to improve our Help Center developer experience and would love to talk to any of you that have tried to edit Help Center theme code to achieve something (doesn't matter if it is large or small customizations).
We would like to hear you take us through what you have done or tried to do, how your experience was with our tools, documentation etc. and what feedback you have so we can improve.
If you are interested please sign up here and we will setup a 30 min call.
Looking forward to talking to all you!
Gorka Cardona-Lauridsen
Sr. Product Manager, Zendesk Guide
0
Ari
If I wanted to include an asset (a .svg image icon) in the in-line HTML of an article, how would I format that tag?
For example, I tried <img src="{{asset 'icon.svg'}}"> but the image is always broken. EDIT: To clarify, I'm hoping to use the assets folder so I can replace the image file at a later time and the HTML code doesn't need changing.
Thanks!
0
David Bjorgen
Ari that's how you would do it in an .hbs file. I'm not sure if you can use the curlybars in the article HTML, however.
0
Gerrit
Hello all.
I am trying to include PNG files in a CSS, which is also in the Assets folder. See screenshot.
But they are not loaded. In the browser dev tools it looks like this:
What am I missing?
0
David Bjorgen
Gerrit have you tried encapsulating the asset pointer in quotes?
1
Gerrit
David Bjorgen
Thank you :)
Yes. I tried. Same result.
I also tried transform it into single elements like
0
David Bjorgen
Gerrit are you trying to include the icon in a button as a background image that appears on hover? If so, perhaps try adding the icon as a pseudo element of the button.
1
Gerrit
David Bjorgen Thank you very much. Unfortunately this does not work either :(
I see 403 errors in the console.
Maybe I should contact tech-support.
0
Tipene Hughes
Hey Gerrit,
Out of curiosity, can you try adding the background as an inline style in your HTML to see if that can access the asset correctly? Also, it might be worth removing the png from your help center assets file and re-adding it.
Let me know how you go!
1
Gerrit
Hey Tipene Hughes
thanks for your reply.
I tried this (with and without ' ' ).
did not work. A freshly uploaded image did not work either.
I can see this:
BUT!
I added a class to my regular style.css file of the template
in the article I added just a <div class="prev-img"></div>
and this is the result and its shown in the article :
Does this mean, I cannot use it in a CSS File which I added in the asset folder?
0
Tipene Hughes
Thanks for the additional context, Gerrit!
I've just received confirmation that it is not possible to access image assets from within a CSS stylesheet that has also been uploaded as an asset. Currently, the asset path variable only resolves correctly within the themes default style.css file or in it's templates.
Edit: to add, if you did want to use the image asset directly in the HTML template, you would need to use the asset helper, which would look something like this:
1
Gerrit
Hey Tipene Hughes
Thanks for the info. I had almost thought so. A suggestion would be to include this info in your help center articles.
I think I will solve it by simply copying the CSS content into the style.css.
Thanks again for the great support.
0
Tipene Hughes
1
Rajan
Tipene Hughes Gorka Cardona-Lauridsen I want to import the js file from assets in the script.js file. Is it possible??
0
Gab
That's definitely possible. You can import a zip archive of a help center theme, containing templates, JavaScript, CSS, and assets.
More information can be found here: Importing a help center theme
0
Rajan
@... I meant to use another JS file from assets in the script.js file within the theme. Currently, we do import via documenation_head.hbs.
0