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 Assets section, click Add asset, then 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, click the asset file you want to replace.
- Click the options menu on the upper-right side, 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, click the asset file you want to delete.
- Click the options menu on the upper-right side, then select Delete asset.
- Confirm that you want to delete the asset.
The asset is removed from your assets list.
58 Comments
Is there any way to roll back once we've gone to the theming center beta? We're having all kinds of issues.
@DJ what kind of issues are you having and are you reporting them in the community? I myself am curious as we have it in our Sandbox and think it's awesome so far. I didn't see any posts from you there and I think the product team would like to know about it too so they can be resolved before this is released for general availability. Sorry if I just missed them!
It looks like PDF assets are no longer supported. That's my main issue right now.
Ouch. I recommend posting it to the community if you haven't already. This is very valuable information.
All of our assets are hidden somewhere and I can't find them, but they are still "live". Also, we're having issues publishing bigger PNG images 2000x1000 for example.
I cannot see any option to rename asset in new TC. Here is the screenshot of my account -
Please take a look.
Thanks
Hi @Trapta,
We actually never built the rename asset functionality and this screen shot is just old. We'll update it shortly. You should be able to the upload the file under a new name to rename it.
Thanks!
Thanks for the update @Ryan McGrew!
Hi,
I'm having issues using this new asset format in the html email template.
I'm using the following code
<img src="{{asset 'MyLogo.png'}}" alt="My Logo" width="124" height="17">
It continues just to show the alternative text. I've tried using other asset references here and haven't been able to successfully display any logo in an email notification. Can anyone suggest what I might be doing wrong here? Is there an option of finding what the true URL of this image is, like we did in the olden days?
Hi @Biscuit,
Unfortunately our Email template system and the Help Center template system are totally different. The {{asset ...}} helper is available for use in Help Center templates not for Email templates.
We have additional information on customizing your email templates here.
First of all not a fan of this new theme interface. Looks way confusing. I have been customizing Zendesk themes since 2011. I know how Zendesk has grown and what has become right now. I think Zendesk development team is always struggling to give user a friendly interface for customizing theme. So far I haven't switch to this new theme interface for many of my clients and I am still using the old one. But today, I have an encounter with this new theme interface and duh. I couldn't find an intuitive way of linking css bootstrap file. I uploaded it in assets and it shows three options "Template", "CSS", and "JavaScript". In my opinion, at least it should have given an example of how to use this asset, because there is plenty of space in that window. Secondly, when Zendesk renders the asset link <link href="{{asset 'bootstrap-grid.min.css'}}" rel="stylesheet" />, it completely changes the name of asset. Why? I was looking at the Document Head template in developer tool where I linked the css bootstrap using the above statement, I was thinking that the CSS file is not linked, instead it was linked but it was rename by Zendesk, bravo. There is also no Save button, only Publish button. What if I want to only Save the theme but not publish it. Suppose I want to publish it on a certain date. I think there might be such option in this new theme interface, but they not so obvious and not very intuitive.
Hey Jehan -
Thanks for the feedback. I encourage you to share it in the Product Feedback topic in the Community, so that our Product Managers will see it. They don't typically see all of the comments on KB articles.
@Biscuit Here's how can you find the true URL of your assets.
http://theme.zdassets.com/theme_assets/<SubdomainID>/<SHA-1 encrypted file>.<file extension>
For example;
http://theme.zdassets.com/theme_assets/237111/5566aedb35b572018773985617b108eddbbbcf05.png
Thanks for sharing that answer, Rogelio! I see that this is your first post - Welcome to the Zendesk Community! I encourage you to head over to the The Lounge to familiarize yourself with our Community Guidelines and to post in the Introductions thread to introduce yourself to everyone.
We look forward to seeing you around the Community. Happy Zendesking!
Hi Jehan and Rogello,
Thanks for the feedback. Just wanted to chime in here.
We've built the {{asset}} helper in Curlybars to allow customers to link to their assets dynamically. Because we store assets on a CDN we want to be able to cache those so we can serve them as fast as possible. However this has drawbacks when it comes to updating files. By using the {{asset}} helper we can dynamically serve the latest version of a file as soon as it's uploaded.
We've given you instruction how to use it int templates, CSS and JavaScript view the asset view in the editor. By using this, you'll be able to update, export, import and distribute your theme as you'd like. I know it's a change, but I believe once you get used to it you'll see the benefit.
Jehan to your point about previewing and saving in a currently published theme, we recommend that you either duplicate your current theme or export it and work offline when making changes. This will allow you to make a series of changes, preview and verify the behavior and everything is working as expected and then publish it live.
There's some documentation on working with your live theme here and some more documentation with working on your theme locally here and here.
Thanks!
Hi all,
first time here :)
I've added an xml file as an asset and I have a javascript code that should access the asset and read its content. I tried pasting the "Javascript (via template)" code into my source code but when I try to read it I just get a "{{asset 'file.xml'}}" as a string.
Any ideas how to accomplish this?
Thanks
Hey Elad,
Can you tell where you've pasted the code? The {{asset 'file.xml'}} will only be rendered properly if it is in a template (header.hbs for example).
Thanks!
Hi Ryan,
I've pasted the code in my article source code:
<script>// <![CDATA[
var assetsClarizenFunctions = "{{asset 'ClarizenFunctions.xml'}}";
//code that reads the resource will go here//
// ]]></script>
Thanks
Hi Elad,
Thanks for getting back to me. You'll need to use it as part of a template like article_page.hbs or header.hbs rather than the source view of an article. I hope that helps clarify.
Thanks!
We had previously uploaded assets centrally and used the source URL to call those images directly in various articles. The images are used for the numbers on numbered lists, so not really something that can be added to a standard template. Is there a better way of accomplishing this so that we don't have to add the same images to every article that uses them? (Apologies if I'm missing something obvious!)
Hey Brett,
This sounds like something that should be achievable by CSS styles on ordered lists and assets hosted in your theme. Maybe I'm missing something? Forgive my poor css-ing but something like this:
Does that make sense?
Thanks!
Thanks so much, Ryan - it seems pretty clear we weren't really calling images in an optimal manner before. I got looped in but am not our normal ZenDesk theme owner or very knowledgeable in CSS, so thanks again for providing the answer to what was probably a silly question!
Hey Brett!
No worries. We've all gotta wear a few extra hats sometimes ;) Glad you got it sorted out.
Thanks!
What's the correct method to reference an asset in the scripts.js file? We have a JSON file loaded as an asset that I want to feed to a script. The placeholders don't seem to pickup. Can we use a direct URL to the asset?
Hey Dan,
In any template you can use the following snippet to assign to a variable for use in JavaScript.
From there you can then reference that asset in JavaScript.
Thanks!
Heya,
Is there anyway I can create a folder structure to organise my assets in the Help Centre themes? We're doing a highly customised page with heaps of photos and font types, and it's getting a bit unruly.
Thanks in advance.
Hey Michael,
Unfortunately we don't support subfolder structures in the assets directory at this time.
Thanks!
I have added my assets in the form shown in this article, to my css files and re-uploaded. But they are not showing up. None of the assets in my css are working. Please help!
Hi Roxanna,
I created a ticket to help you with this.
My issue has been resolved. Thank you.
Please sign in to leave a comment.