Category page customization

Hi Danielle,

This is a nice way of using assets in order to create category banners.

The problem with this method is that it requires the category name to be a single word (without spaces).

You can overcome it if you don't use Category Descriptions - more on this later.

Let's begin. Assuming you have several categories (in my example those are cat1 and cat2).

Also, you have a pattern image for each of the categories.

1. Rename your images to the name of the categories (cat1, cat2) without an extension name (important!)

2. Customize your theme, and upload those image files as assets.
Since those files have no extension, when you click on them from the assets list they will get downloaded as files instead of shown in the browser - this is ok.

3. Add the following script to the Category Page, under the {{breadcrumbs}} nav node:

<div class="category_header_image_wrapper__c">
<div class="category_header_image__c" style="background-image: url('{{asset category.name}}');"></div>
</div>

4. Add the following code in the CSS tab:

.category_header_image_wrapper__c {
height: 70px;
}

.category_header_image__c {
height: 50px;
position: absolute;
width: 100vw;
left: 0px;
}

5. Publish and you are done.

----  Examples: -------

-----------

The name of the category will be rendered as the name of the asset you uploaded.

It means that whenever you change your category name, you need also to add a new asset with that name (you can't edit asset name once you uploaded it).

Also, if you don't have a corresponding asset, you will get an unnecessary gap in below the breadcrumbs, where the banner could have been.

If you have a category name with more then one word, this method will not work, because the asset name would not get rendered to the img tag.

Unfortunately, we can't use the Category ID, because this is a numeric value and it won't get rendered as a string for some reason (@zendesk - any solution?)

What you can do, if you don't use Category Descriptions, is to add a single word as the category description of each category.

So if your category name is "Product Updates", add the description "ProductUpdates" and upload a corresponding asset.

All you have to do now, is change the code a bit:

Instead of:
style="background-image: url('{{asset category.name}}');"
do:
style="background-image: url('{{asset category.description}}');"

And also, delete (or comment out) the paragraph node that renders the category description on the page:

<p class="category-description">{{category.description}}</p>

-------------------

Let me know how this works out for you!

Tal

That worked really well! Thanks so much for the help.

The only problem I'm having now is that my image isn't fitting within the div. 

The images should be 900px x 235px. Here's what I have:

.category_header_image_wrapper__c {
height: 260px;
}

.category_header_image__c {
height: 235px;
position: absolute;
width: 900px;
}

But, for some reason, only part of the image is visible. I'm not sure what I'm doing wrong as the image is 900 x 235. 

Hi, i am not getting output.I have followed above steps. How we can upload images without extention.Can you please clarify this.Default it will show extention like(.jpg, .gif, .png).

Hi Mohammed, welcome to the Community!

I don't think it's possible to upload an image without an extension. Can you give some detail about why you need to do this?

Hi Mohammed,

Here is the easier way I think. Find this part of the code:

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

and under it put:

{{#is category.id 123456}}
<script>
$('.category_header_image__c').css('background-image','url({{asset 'NAME_OF_THE_FILE_WITH_EXTENSION'}})');
</script>
{{/is}}

- 123456 - replace it with your Category ID
- "NAME_OF_THE_FILE_WITH_EXTENSION", replace with the name of your uploaded img, eg. getting-started.png

You can have Categories with more then one word in the name.
Copy, paste this code and replace the same for any other Category.

Please let me know how it works.

Hello,

I've tried this myself and cannot get it to work.
Localization might have something to do with this, but I am not sure.

I also tested your solution Vladan and was unable to have a banner appear unfortunately.

Hey Anna, my code wouldn't work with some other already provided customized code.

Copenhagen default theme don't have backgound hero image on Category pages, so I assume that you have customized help center. In that case, this code will not work. Anyway, please try with this one (put this code on the start of Category page code block):

{{#is category.id 777777777}}
<script>
$('section.section.hero').css('background-image','url({{asset 'my-img.png'}})');
</script>
{{/is}}

777777 - should be changed to your Category ID.
my-img.png - should be changed to your uploaded background image.

If this code doesn't work or help you, it would be very helpful if you can share with us your Help Center url. :)

Hello Vladan.

It is not the Copenhagen template I am using:)

It is the Elk one.

I've tested it and couldn't get it to work still.

Here is our humble and beloved Help Center.

I have been testing the code in our Sandbox though.

Hey @Anna Roth,

In your case, you have to tweak your code a bit to make it work.

Go to your category template and just above <h1 class="page-header"></h1>, add -

<section class="section hero"></section>

In your CSS, add -

section.section.hero {
 height: 300px;
 background-position: center;
 width: 100%;
}

Now use the code of Vladan. It will work for you now.

Let us know how it goes for you.

Team Diziana

It seems to be working. The banner showed up. (Hazzaah!)

I am just not sure how to test it other than pushing it live in the Sandbox.

Would one assume that it is a matter of this lineup for category variations?

{{#is category.id 1}}
<script>
$('section.section.hero').css('background-image','url({{asset '1.png'}})');
</script>
{{/is}}

{{#is category.id 2}}
<script>
$('section.section.hero').css('background-image','url({{asset '2.png'}})');
</script>
{{/is}}

{{#is category.id 3}}
<script>
$('section.section.hero').css('background-image','url({{asset '3.png'}})');
</script>
{{/is}}

Thanks you!

@Anna Roth,

I used chrome dev tools to inspect the HTML and test it.

Glad you got it working :)

Thanks

Team Diziana

thanks its working .

the image using in category page banner.  can we  will also use for section page & article page of same category?

Hi @Anil,

Yes, you can use it for section page and article page of same but you have to tweak the code a bit to get category id on section and article template.

Thanks

Trapta

Hi Zendesk team, I have a question. I am using the Conway help center theme. I have added a background image inside a category (not on the category icon or box) and this category is visible when the preview role is set as manager. I used the following code on -

category_page.hbs:

<section class="section hero"></section>
{{breadcrumbs}}

<div class="." style="background-image: url('{{asset category.name}}');"></div>
{{#is category.id 123456}}
<script>
$('section.section.hero').css('background-image','url({{asset 'cat1.jpg'}})');
</script>
{{/is}}

style.css
section.section.hero {
height: 100px;
background-position: left;
background-size: 200px 200px;
background-repeat:no-repeat;
width: 400%;
}

I want this image to be displayed in this category only, which is working perfectly fine. But when I go to the other categories in the homepage, it doesn't show this image (it shouldn't) but it is occupying the space which was covered by the image in the other category(with the image). How do I get rid of those spaces in all other categories without affecting the category with the picture? Any help will be appreciated. :)

Hi @Tushar,

Simply wrap your div too inside the {{#is}} helper so that your code will look something like this:

{{#is category.id 123456}}
  <div class="." style="background-image: url('{{asset category.name}}');"></div> 
  <script>
    $('section.section.hero').css('background-image','url({{asset 'cat1.jpg'}})');
  </script>
{{/is}}

Let me know if this solves your issue.

Thanks

Team Diziana