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
Thanks for letting us know, Roxanna. Glad to hear you got things sorted!
What file types are accepted as assets? It seems that PHP and HBS aren't supported.
Hi David,
Please see this section for the list of allowable assets:
https://support.zendesk.com/hc/en-us/articles/115012399428#topic_u41_tdt_vhb
How would one update an asset using the API?
Currently I am using a .json asset to generate page content and have to replace it manually every time I need to update the page, can this be automated or should I be using another method for making dynamic content?
Hello Callum,
What you described currently isn't available in Guide. I would recommend suggesting this update in our Product Feedback forum so our developers could consider implementing this feature into our base program.
Guide Product Feedback
Hi Callum
We are currently running an Theming API EAP, which may help you.
While the theming API does not currently offer the ability to update an asset in a theme or an entire theme, your problem can maybe be solved by uploading an new theme via the API with the updated asset and then setting it live via the API.
You can read more and sign up here.
If you have questions regarding the Theming API you are welcome to post them in the Themin API EAP topic.
Depending on your use case you may also be able to use the dynamic content API.
Hello,
I am building a custom theme and integrated my Github Repo.
Somehow, I am not able to see the updated assets added to my asset folder. Do you have an idea what could be the reason. It works fine on local preview but not working when I commit changes to repo and update the theme in Help Center.
Can someone help?
Thanks,
Rakesh
Hey Rakesh,
Can you confirm you went through the following steps to update your Github-managed theme in Guide? Updating your Github-managed theme in Guide
I believe you'll need to go through those steps provided before your assets are updated.
Let me know!
Is there a way to utilize the asset helper to insert a CSS background image inline in script.js?
Example:
<a href="#" target="_blank" style="background: url($assets-banner-png);"></a>
Zendesk doesn't seem to recognize inline CSS assets.
Hi David,
I think you can do something like this, which works:
<a href="#" target="_blank" style="background: url({{asset 'banner.png'}});"></a>
It does work as I have used it in the theme I am working on.
Thanks,
Rakesh
Rakesh,
I could not get that to work. I tried a number of different variations but to no avail.
Hi David,
Strange, the above code works for me on my theme. I am extending the standard Copenhagen theme.
Are you trying to access image on the template level or do you want it to use in JavaScript? It may be available in template but in JS it does not as the assets are being served via CDN and it renames the image name with encryption and hence the asset name does not stay the same.
I had to also struggled to learn that... so if you are not trying to use the image with combination of some dynamic code and only need the image path in JS, let me know. I have one solution which may help to get you the name of the image in JS.
Thanks,
Rakesh
Rakesh, I think the reason it's not working for me is that I'm trying to inject the asset in the script.js file. And as you said, since ZD renames the image in order to serve it from the CDN, I cannot access it directly. I've found a JS + CSS workaround, but it's a multistep process. I'd like to be able to insert the image path as a variable in my script.js file and let the code do the rest.
Hey David,
Looking at the thread we'd recommend that you create a namespaced/global variable in the document_head.hbs template and then reference that in script.js. Something like the following
document_head.hbs:
<script>
var linkBackgroundUrl = "{{asset 'link-background.jpg'}}";
</script>
then in script.js you should be able to reference the linkBackgroundUrl variable. Let me know if that makes sense. The concept can be expanded upon and can likely be made much more elegant than this simple example.
We'd like to break up our HBS templates into multiple files. Is it possible to include the contents of a text-based asset file inside an HBS template? I tried using the {{asset 'file.txt'}} syntax but that just ends up printing the URL for file.txt in the page itself. We're getting "File too long" errors when using ZAT for local development which is why we're wanting to break up our long HBS template into multiple files.
Hey Matthew Bass,
Sorry to hear you are experiencing issues with the template sizes. The template sizes are limited to make sure we are able to render your help center pages in a timely and reliable manner.
You might want to consider moving some functionality to javascript and defer loading it until it is needed which will improve the site loading time. If your templates are large due to having static content (i.e. text) you might find dynamic content useful - https://support.zendesk.com/hc/en-us/articles/203661426-Changing-your-Help-Center-design-based-on-your-end-user-s-language-Guide-Professional-and-Enterprise-
You can read more about the limits that apply to Guide customizations in https://support.zendesk.com/hc/en-us/articles/115014408008-Guide-product-limits-for-Help-Center
Is there a way to download/access an asset after it has been uploaded?
Hi Justin Baden
If you mean on article level, you simply go to the article and find the asset/uploaded file under article settings.
If you are talking about theme assets you can access them by editing the code of your theme.
<img src="{{asset 'article.id'.png}}">
<img src="{{asset '<%= article.id %>' .png}}">
Hey Khusboo Shah
Can you please, let me know where you want to try to add a images form the assets is it category blocks or anything else
Thanks
Pulkit
Hey Khusboo Shah,
The asset helper supports prefix and suffix options to achieve what you want to do.
Have a look here https://developer.zendesk.com/apps/docs/help-center-templates/helpers#asset-helper
Thanks!
Hi Khusboo Shah
Happy to help you here, You have to add the following image tag where you want to add an image dynamic with the article id
To add an image dynamically you have to upload in the assets like below
All of your images need to start with app-
<article.id>.png
All of your images need to be in .png format or if you have all of your images in other formats like .svg or .jpg you just need to update the suffix of the image tag with your format
like <img src="{{asset id prefix='app-' suffix='.svg'}}" />
Let me know if it solves your issue
Thanks
Pulkit
Hi Pulkit,
We tried the above solution,
Could you please help?
Hey Khusboo Shah
You had edit the wrong place, I have updated the code you have shared, just copy it from below and paste it where you wanna use it
then, Rename your image with app-<Your Article ID>.png and upload it to the assets folder
Please let me know if it solves your issue
Thanks
Pulkit
We used the tag as suggested and I don't see where we wrongly placed the tag.
Hey Khusboo Shah
Can you please confirm one thing? for me to guess what was happing so that I find the way to add an image on the article template
As per the screenshot you shared there is an element with the following class you have to add the below code, which I have highlighted
Then toggle the multiple articles on the view mode at the browser and then inspect that your multiple articles are printing the id of there, then share the screenshot for the same.
So that I will look around, how can we help you on this
Thanks
Pulkit
Hi Pulkit,
Khusboo
Please sign in to leave a comment.