Using your own theme assets for Help Center (Guide Professional and Enterprise)

Return to top
Have more questions? Submit a request

57 Comments

  • Nicole S.
    Zendesk Community Team

    Thanks for letting us know, Roxanna. Glad to hear you got things sorted!

    0
  • David Bjorgen

    What file types are accepted as assets? It seems that PHP and HBS aren't supported.

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    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

     

    0
  • Callum Walley

    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?

    0
  • Devan - Community Manager
    Zendesk Community Team

    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

    1
  • Gorka Cardona-Lauridsen
    Zendesk Product Manager

    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.

     

    1
  • Rakesh Sompura

    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

    0
  • Brett Bowser
    Zendesk Community Team

    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!

    0
  • David Bjorgen

    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.

    0
  • Rakesh Sompura

    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

    0
  • David Bjorgen

    Rakesh,

    I could not get that to work. I tried a number of different variations but to no avail.

    0
  • Rakesh Sompura

    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

    0
  • David Bjorgen

    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.

    0
  • Ryan McGrew
    Zendesk Product Manager

    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. 

    0
  • Matthew Bass

    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.

    0
  • Augusto Silva
    Zendesk team member

    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

    0
  • Justin Baden

    Is there a way to download/access an asset after it has been uploaded? 

    0
  • Carsten Falborg
    Community Moderator

    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.

    0
  • Khusboo Shah
    In html markup,
    <img src="{{asset 'backpack2.jpeg'}}">
    
    I want to pass a dynamic image name in the asset. How is this possible?
     
    For example,
    <img src="{{asset 'article.id'.png}}">
     
    or
    <img src="{{asset '<%= article.id %>' .png}}">
    Thanks!
    0
  • Pulkit Pandey
    Community Moderator

    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

    0
  • Augusto Silva
    Zendesk team member

    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

     

    0
  • Khusboo Shah
    Hello Pulkit,
     
    We have a customized theme where there is an applications listing page. We want to use the image assets uploaded as a thumbnail image for the product in the listing page.
    We upload each asset with the name as app-<article_id>.png and want to use this image in the listing page as
    <img src="{{asset app-<article.id>.png}}">
    The problem here is that , I am not able to set the article.id in the image source as above.
    As per the documentation we can use,
     
    <img src="{{asset app-123456789.png}}">
     
    This works fine for one article, but we want this to by dynamic.

    Thanks!
    0
  • Pulkit Pandey
    Community Moderator

    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 

    <img src="{{asset id prefix='app-' suffix='.png'}}" />

    To add an image dynamically you have to upload in the assets like below

    app-123456789.png

    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

    0
  • Khusboo Shah

    Hi Pulkit,

    We tried the above solution,

    <img src="{{asset article.id prefix='app-' suffix='.png'}}" />
    but we got the following error:
    not possible to access `article` in `article.id`
    However, we could access article.id in that line in this way:
     
              <%=article.id %>

    Could you please help?
     
    Thanks,
    Khusboo
    0
  • Pulkit Pandey
    Community Moderator

    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 

    <img src="{{asset id prefix='app-' suffix='.png'}}" />

    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

    0
  • Khusboo Shah
    Hello Pulkit,

    We used the tag as suggested and I don't see where we wrongly placed the tag.
     
    I have uploaded the image for reference.
     
    We also used:
    <img src="{{asset id prefix='app-' suffix='.png'}}" />
    
    but it obviously won't work as id is not available anywhere in the page.
     
    Where as
    <img src="{{asset article.id prefix='app-' suffix='.png'}}" />
     
    this should have worked, but it didn't.

    Thanks,
    khusboo
    0
  • Pulkit Pandey
    Community Moderator

    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 

    <div class="app-item__image-wrapper" id="<%=article.id %>">

    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

    0

Please sign in to leave a comment.

Powered by Zendesk