Recent searches


No recent searches

Using your own theme assets for help center



image avatar

Jennifer Rowe

Zendesk Documentation Team

Edited Jun 21, 2024


-4

31

31 comments

Is is possible to upload a whole folder at once? As an alternative, is it possible to upload using an FTP client?

0


image avatar

Tipene Hughes

Zendesk Developer Advocacy

Hey Felipe,
 
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


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


image avatar

Tipene Hughes

Zendesk Developer Advocacy

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:

{{asset article.title suffix=".png"}}

Feel free to reach out with any questions!

Tipene

0


Hi Tipene, 

How do I find the folder and asset number for my assets to use in my home_page.hbs page, like is used in the following example code:
<img src="//theme.zdassets.com/theme_assets/2383527/82ce61cc2c0bddc27914a21813df17e0de438705.png">
 
In my instance, it only shows the following links in the asset folder (see picture). How do I find the theme.zdassets.com/theme_assets/ folder for my instance?
 
 

0


image avatar

Gorka Cardona-Lauridsen

Zendesk Product Manager

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


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.

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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.

.class-name {
height: 200px;
}

 

Thanks 
Pulkit

 

0


Hi Pulkit,

Like this? If so, It didn't work.

 

0


image avatar

Pulkit Pandey

Zendesk LuminaryCommunity Moderator

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


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


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


Heather Firth

You'll want to load scripts in to your `document_head.hbs` file as a path to the `src` attribute, like this:

<script src="{{asset 'your-script-name.js'}}"></script>

1


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


image avatar

Gorka Cardona-Lauridsen

Zendesk Product Manager

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


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


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


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


Gerrit have you tried encapsulating the asset pointer in quotes?

background: url("$assets-prev-png") left 48% no-repeat;

1


David Bjorgen
Thank you :)

Yes. I tried. Same result.

I also tried transform it into single elements like

background-image: url("$assets-prev-png")

0


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.

.lb-nav a.lb-prev {
position: relative;
padding-left: 40px;
}

.lb-nav a.lb-prev:before {
content: "";
display: block;
position: absolute;
left: 0;
width: 34px;
height: auto;
background: url($assets-prev-png) left 48% no-repeat;
opacity: 0;
transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover:before {
opacity: 100%;
}

1


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


image avatar

Tipene Hughes

Zendesk Developer Advocacy

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


Hey Tipene Hughes
thanks for your reply.

I tried this (with and without ' ' ). 

<div style="background-image: url('$assets-prev-png');">&nbsp;</div>

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

.prev-img{
background-image: url($assets-prev-png);
}

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


image avatar

Tipene Hughes

Zendesk Developer Advocacy

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:

<div style="background-image: url({{asset 'prev.png'}});"></div>

1


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


image avatar

Tipene Hughes

Zendesk Developer Advocacy

No worries at all, and great call out! I'm working with our docs team now to have this clarified.

1


Tipene Hughes Gorka Cardona-Lauridsen I want to import the js file from assets in the script.js file. Is it possible??

0


image avatar

Gab

Zendesk Customer Care

Hi Rajan, 
 
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


@... 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


Please sign in to leave a comment.