Long time lurker, first-time poster. A lot of the code and ideas I gathered from @moderatorwes and all the other mods so enjoy.
The majority of all Help Centers today have images or icons on their Home Page to draw attention to certain parts of their Help Center. We normally see images on the Home Page next to the list of categories. We also see icons on the Category Pages and Sections Pages so for this tutorial we will focus on those three pages.
With the new HC theme center, you can now import and export your themes so if you are currently using the new HC theming center here's a copy of the theme and code that is used in this tutorial.
For the rest of this tutorial, we will be using this demo site so go take a look - https://community-tutorial.zendesk.com/hc
There are many ways to accomplish this but we will cover two different solutions in this tutorial.
Solution 1 - Using the built-in Curlybar framework
Solution 1 (Curlybar Framework)
Let's start with the Home Page. In this example, I’m going to use images that I upload into the Asset area. The images are currently sized at 64 X 64.
Sometimes the icons are above the category text and sometimes the images are beside the category text so let's cover both of those now. In order to add the images/icons, we are going to use the {{#is}} helper.
We will need to find your category ids first. The simplest way to do this is to navigate to each category and find its id in your address bar:
HOME PAGE IMAGES ABOVE CATEGORY TEXT
Insert this code below starting on line 15 of the default template. Make sure to change the ID to your category ID and the image to your image name.
<!--Images for categories Home Page -->
{{#is id 115001215823}}<img class="" src="{{asset 'hamburger.png'}}" />{{/is}}
{{#is id 115001216103}}<img class="" src="{{asset 'pizza.png'}}" />{{/is}}
<!--End images for categories -->
Your code should look like this:
Now your Home Page will look like this, looks great right!
HOME PAGE ICONS BESIDE THE CATEGORY NAME
Easy enough let's just add some CSS. I'm also resizing our images to 32 X 32 in the CSS to make them smaller.
/***** CSS Modifications for Category Images *****/
.categories .blocks-item-link {
display: flex;
align-items: center;
}
.blocks-item img, .category-page-images, .section-page-images {
margin-right: 20px;
width: 32px;
height: 32px;
}
Now your Home Page will look like this, great job!
You can use the {{#is}} helper on just about any of the Help Center's pages.
Let's go ahead and put the image on the Category Page. For the category page, the code will look exactly the same except we are adding a class so the images will be small. This code goes right below <header class="page-header">. Once again, Make sure to change the ID to your category ID and the image to your image name.
{{#is category.id 115001215823}}<img class="category-page-images" src="{{asset 'hamburger.png'}}" />{{/is}}
{{#is category.id 115001216103}}<img class="category-page-images" src="{{asset 'pizza.png'}}" />{{/is}}
<!-- End Images for Category Page -->
Now your Category Page will look like this!
We might as well have the icon show on the section page as well right. The code is going to be very similar however since we only show sections on the section page we've got to change the ID now to point to the sections and not the categories. If you don't remember how to do this just scroll back to the top and look at the very first image in this tutorial. Once you have the section IDs paste the below code right below <header class="page-header"> which should start on line 11. Once again, Make sure to change the ID to your section ID and the image to your image name.
<!--Images for sections -->
{{#is section.id 115001526163}}<img class="section-page-images" src="{{asset 'hamburger.png'}}" />{{/is}}
{{#is section.id 115001526183}}<img class="section-page-images" src="{{asset 'pizza.png'}}" />{{/is}}
<!--End images for sections -->
Now your Section Page will look like this!
There we go. Hopefully, you've successfully got images on your Home Page, Category Page, and Section pages of your Help Center. Anytime you add a new category or section you will need to go and add code to those pages. This solution works great if you only have a handful of categories and sections but you have a lot more, then, Solution 2 is for you.
With this solution, we are going to define our images into an array on the Document Head page then add modify some HTML and jQuery on each of the pages. The benefit of this solution is once you define your image into the array then the home, category and section pages will include the icon automatically. Once you set everything up the only place to add an image would be the Document Head page. For this tutorial, I'm going to put the icons beside the image so if you want the images to the side then you need the below CSS. (this is exactly the same CSS as Solution 1). If you prefer the images to be above the category text then do not insert the CSS.
/***** CSS Modifications for Category Images *****/
.categories .blocks-item-link {
display: flex;
align-items: center;
}
.blocks-item img, .category-page-images, .section-page-images {
margin-right: 20px;
width: 32px;
height: 32px;
}
Let's start with the Document Head page first.
Just like we did in Solution 1 we will be using the Categories IDs. The simplest way to do this is to navigate to each category and find its ID in your address bar:
Add the following code to your Document Head page. The first set of numbers is your category ID and then I named the images with the category.id, however, you can name them whatever you would like. Make sure to change the ID to your category ID and the image to your image name.
<script>
var categoryIcons = {
"115001216103" : "{{asset 'pizza.png'}}",
"115001215823" : "{{asset 'hamburger.png'}}"
}
</script>
Lets move on to the Home Page, we will need to modify the current HTML and replace with some modified HTML. Locate line 13 on the Home Page - you should see <li class="blocks-item"> and then on line 18 you will see </li>. Replace that code with the code below. Since we are adding images into the DOM sometimes there is a small delay before the images shows up so we are also going to add an image loader as well.
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
<img src="{{asset 'ajax-loader.gif'}}" class="icon" data-title="{{id}}">
<h4 class="blocks-item-title">{{name}}</h4>
<p class="blocks-item-description">{{excerpt description}}</p>
</a>
</li>
Now lets add the jQuery at the very bottom of the Home Page.
<!---- Home Page jQuery --->
<script>
$('.icon').each(function (idx, itm){
var categoryID = $(this).attr('data-title');
$(itm).attr('src', categoryIcons[categoryID]);
});
</script>
If all went well your Home Page will now look like the following.
If you would like the same icon to show up on the Category Page then let's do the same as above. Locate line 10 on the Category Page - you should see <header class="page-header"> and then on line 15 you will see </header>. Replace that code with the code below.
<header class="page-header">
<img src="{{asset 'ajax-loader.gif'}}" class="category-page-images icon" data-title="{{category.id}}" />
<h1>{{category.name}}</h1>
{{#if category.description}}
<p class="page-header-description">{{category.description}}</p>
{{/if}}
</header>
Now lets add the jQuery at the very bottom of the Category Page.
<!-- Category Page JQuery -->
<script>
$('.icon').each(function (idx, itm){
var categoryID = $(this).attr('data-title');
$(itm).attr('src', categoryIcons[categoryID]);
});
</script>
Our Category Page should look like the following:
If you've made it this far I'm sure you would like the icon to also show up on the section page. Lets make it happen. Locate line 10 on the Section Page - you should see <header class="page-header"> and then on line 15 you will see </header>. Replace that code with the code below.
<header class="page-header">
<img src="{{asset 'ajax-loader.gif'}}" class="section-page-images icon" />
<h1>
{{section.name}}
{{#if section.internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</h1>
{{subscribe}}
{{#if section.description}}
<p class="page-header-description">{{section.description}}</p>
{{/if}}
</header>
Now lets add the jQuery at the very bottom of the Section Page.
<!--Section Page jQuery -->
<script>
$('.icon').each(function (idx, itm){
var categoryID = $('.breadcrumbs li:nth-child(2) a').attr('href').match(/[0-9]+/);;
$(itm).attr('src', categoryIcons[categoryID]);
});
</script>
There we go. Hopefully, you've successfully got images on your Home Page, Category Page, and Section pages of your Help Center. Anytime you add a new category just be sure you add the category id and image to the array inside the Document Head page.
Comments
0 comments
Article is closed for comments.