Adding images/icons into the Copenhagen Theme

@Wes, looks like someone beat you to it. :-)
Great tip @anonymous. Thanks for sharing it.

Well, we are glad that you stopped lurking and posted such a great tip! Moderator Wes inspires a lot of people. :)  

As thanks for your contribution, look for a link for a Zendesk t-shirt in your inbox! 

Thanks for sharing this!

@Jennifer, yes he sure does and thanks for the t-shirt :)

@Anonymous - Great tip and glad you were able to piecemeal my code snippets together from the various post.  I know the community members will be grateful that everything is in one post.  Keep up the great work!

Thank you for this tip! It's helped a ton!

@Anonymous, this is great! I was trying to find out why my images weren't showing up in both our English and Spanish categories, but I was using English words to identify the categories:

{{#is name 'category name'}}<img src="{{image_name.png'}}" alt="alternative text here" />
{{/is}}

Now, using the category IDs instead, the images are appearing in both help centers.

{{#is id 115008316527}}<img src="{{image_name.png'}}" alt="alternative text here" />
{{/is}}

Thank you!!

@Deb I'm glad you were able to resolve your issue with the ID.  I'm glad you found the code useful and easy to implement.  Best of luck with your Help Center.

Thanks for being so helpful, @Anonymous!

is there a way to hide the description with this, aside from deleting the description? Maybe only have the description show when hovering over the category?

Hey Robert!

I can't give detailed info on how to do it, not being familiar enough with Javascript, but I'm fairly certain you can use JS to manipulate the way that content displays (or not). We don't have any tips that address that specifically but we have lots of coding gurus here in the Community that may be able to help!

@Jessie - we actually figured out how to do it. It just requires adding some code to the sytles.css file - super easy actually and does not need to involve JS. 

Fantastic! I'm glad you got it figured out!

When using the jQuery method, if no image exists for a category a blank box is displayed.

Is there a code modification which will display images if they exist in the document head, but show only the heading if there is no image.

Hi @..., 

As per the code, in your template replace

<img src="{{asset 'ajax-loader.gif'}}" class="icon" data-title="{{id}}">

with 

<img src="{{asset 'ajax-loader.gif'}}" class="icon hide" data-title="{{id}}">

and at the bottom of your style.css file add:

.hide {display: none;}

In your script code replace:

<script>
  $('.icon').each(function (idx, itm){
    var categoryID = $(this).attr('data-title');
    $(itm).attr('src', categoryIcons[categoryID]);
    $(itm).removeClass('hide');
  });
</script>

Let me know if this solves your issue.

Team Diziana

@... - Perfect, thanks!

Hey all, for some reason neither of the methods works for me, the icons are not being displayed. Does anyone have any general suggestions for troubleshooting? I know this is fishing broadly but maybe anyone else has come across issues while trying this out?

Thanks in advance!

@...

I had a similar issue last week- 

after playing with it a lot I found a <sections> part on the hbs file

We do not have sections included in our subscription, so I removed it to un-clutter- and this did the trick!

@... thanks a lot! 

I took another look at the sections part of our hbs file and noticed that we actually use sections on our home page. Adding the code to the sections part of the file instead of the categories part did the trick for me. Thanks for the nudge :)

Thanks for article Anonymous, it's very detailed and useful.

@... great catch! I couldn't figure out why the solution was not working for me, your comment helped! Thanks again

So happy!
I'm still struggling with one specific category that won't show icons no matter what.
It's set up exactly the same like the rest but one specific categoy is very stubborn.

If anyone knows how this could be solved or why would a specific category not show icons- any leads much appreciated!

@..., are you having problems with the icon showing on the category link on the home page, or with the icon showing on the category page?

Some things I could think of to check:

• Was the image you are using for the icon uploaded to assets, and are you using the correct placeholder for it?
• Do all the classes used in your templates exist in style.css?

Thank you so much Karen!

I can't locate any of those...
Here's my code for category pages:

<code>

<div class="section-tree">
{{#each sections}}
<section class="section">
<h2 class="section-tree-title">
<a class="clean" href="{{url}}">
<span><i class="fa
{{#is name 'Help me save money'}} fas fa-search-dollar{{/is}}
{{#is name 'Help me save time'}} far fa-clock {{/is}}
{{#is name 'Help me with EVERYTHING'}} fas fa-hand-holding-usd {{/is}}

{{#is name 'Our Training'}} fas fa-chalkboard-teacher {{/is}}
{{#is name 'Vendor'}} fas fa-industry {{/is}}
{{#is name 'Commissary'}} fas fa-warehouse {{/is}}

</i></span>
{{name}}
</a>
</h2>
{{#if articles}}....

</code>

The first 3 are not working. The last 3 (and 25 more) are working as expected :) lol 

@... It looks like you're using font awesome, so now I see you don't need to have uploaded icons to assets.

It looks like your code is missing the closing quote and angled bracket, so I'm not sure how any of your lines work. Don't you need to have "> after the last {{/is}}?

Is it correct to use class fa before fas fa-[icon-name]? The examples at https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use just show class="fas fa-[icon-name]". Also, I noticed that your second one is using far class, which according to that link requires font awesome Pro, so do you have that?

I see that the icons you are using do exist at https://fontawesome.com/cheatsheet, so they seem to be correct. Still, you could try changing them to the icons used on the lines that work, just to double check. And you could try changing the icons on the lines that work to the icons used on the lines that don't work.

Another suggestion would be to inspect the element at the section name, and see what the generated HTML looks like. That may give you a clue to what's happening. And sorry for the obvious, but have you double checked that the section names are correct? 

Hope this helps you to locate the problem.

Sorry I have about 25 categories with separate icons so I cut only the start, and forgot to add the closing quote.
that's the closing:

">&nbsp;</i></span>
{{name}}
</a>

I have tried changing the icons both ways and it's consistently the same result- on one of the pages, icons won't show no matter what.

But- BINGO! When I inspected the html, I found the issue!

While all pages render the classes properly:


That page doesn't read the class, and there's no "::before ==0" added:

Any idea what controls this function or how in the world I managed to mess this up? lol
Thank you again so so much!!

This is very strange, because the before pseudoclass should exist automatically in the Font Awesome style sheet. Did you add Font Awesome in your theme by adding a line like this in document_head.hbs? (Not sure if it makes a difference how you added it.)

<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>

To simulate this, I added Font Awesome icons in the category page of my test Copenhagen theme. I think I set it up like yours, and used an icon that doesn't work for you and an icon that does work for you, and they both display.

<div class="section-tree">
  {{#each sections}}
    <section class="section">
      <h2 class="section-tree-title">
        <a href="{{url}}">
          <span><i class="fa
            {{#is name 'General'}} fas fa-chalkboard-teacher{{/is}}
            {{#is name 'Forms'}} fas fa-search-dollar{{/is}}
          ">&nbsp;</i></span>
         {{name}} 
       </a>
     </h2> 

The before pseudoclass for fa-search-dollar specifies to display code "\f688" before the content, which makes the icon appear before Forms. 

So no matter which icon you try to display on the 'Help me save money' section, it doesn't display? Can you send a screenshot of the entire element when you inspect it, like my screenshot above, showing it from <a> to </a>, with all the inner elements expanded?

OMGGGGGG Mystery solved!

Here's what I had set:

{{#is name 'Help me save money'}} fas fa-dollar-sign{{/is}}
{{#is name 'Help me save time'}} far fa-clock {{/is}}
{{#is name 'Help me with EVERYTHING'}} fas fa-hand-holding-usd {{/is}}

Here's what I SHOULD have set:

{{#is name 'Help me save money '}} fas fa-dollar-sign{{/is}}
{{#is name 'Help me save time '}} far fa-clock {{/is}}
{{#is name 'Help me with EVERYTHING '}} fas fa-hand-holding-usd {{/is}}

Tiny little space at the end of the title, that doesn't catch on copy-paste from the title!!

WOOOOHOOOOO!!! 

I realized this when you asked for the full screenshot, and I noticed the extra dash at the end of the link:

So thank you so so much for this!!! I've been pushing this away for months and so happy it's resolved!

Hi Ruthy,

I'm glad that I helped you figure this out, because I was really perplexed by this. I'm still not sure that I fully understand what the problem was. Did the section title have a dash or space at the end?

Yes, sorry :)
There's apparently an extra space that doesn't show when you look at the title.
It's also not picking it up when I copy-pasted the title.


It's basically an invisible extra space, but it's visible on the long link from Zendesk:

Moral of the story: if anyone else encounters this odd issue, you should check in the source for the exact wording and spaces as it shows on the link. 

Thanks for sharing what you figured out, Ruthy!

Personally, nothing is working for me. All I try to do is to have these Sections look better (an image / an icon ) anything. I follow all the steps but it's not up to date right now - Nothing is working. If you can show me the steps I'd be happy. I added a random picture as an asset, then I went in the Section_page.hbs  tried to copy that code in there:

{{#is id 360003646880}}<img class="" src="{{asset 'pexels-ketut-subiyanto-4246118.jpg'}}" />{{/is}}

360003646880 being my Section ID and asset 'pexels-ketut-subiyanto-4246118.jpg being the random picture I wanted to try and I uploaded to the asset - ITS NOT WORKING!! DAMMNNIT!!