Adding category images to the Copenhagen Theme

@Julie - Of course this is possible.  I'll play around with the code as soon as I can and let you know.

That's great news!  Thanks Wes.

@Julie - Sorry for the long wait but I've been very busy.  Here is a way you can accomplish what you are needing with uploading icons.  If you want to use Font Awesome icons then just let me know as it will look a little different.

• Upload your icons into Zendesk Asset Area.
• Add the following code.  (you can replace the code below from the #each category to the end each.

{{#each categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#is name 'Free Themes'}}
<img src="{{asset 'ninja_eyes.png'}}" />
{{/is}}
{{#is name 'Custom Themes'}}
<img src="{{asset 'ninja_eyes.png'}}" />
{{/is}}
{{#is name 'Theme Support'}}
<img src="{{asset 'ninja_eyes.png'}}" />
{{/is}}
{{#is name 'Software'}}
<img src="{{asset 'ninja_eyes.png'}}" />
{{/is}}
<h4 class="blocks-item-title">{{name}}</h4>
<p class="blocks-item-description">{{excerpt description}}</p>
</a>
</li>
{{/each}}

@Julie,

I left this out but make sure you change 'ninja_eyes.png' to your image name.  Should look like this.

@Wes

Thanks for posting this!   I'll be using your code, too!

When testing, without the icons, my categories are two across.   Once I add the icons, they are one category across (and take up the entire width).

Any way to force them to not take up the entire width?

Hi @Andrea.  Can you tell me the size of your icons as they may be forcing the width change.

Wes, I know we say it all the time, so I'm sure you get tired of it....but you're awesome! :)

Would you like to pretty please post this as a tip!?

Thanks @Wes.   The screen I shared had larger icons, so I changed them all to smaller 32 pixel icons with the same results:

@Wes.....figured it out!    Once I removed the original code (I hadn't removed it from the codeline, yet....oops), it all straightened itself out and now looks as I expected!    

@Andrea - Awesome, glad to hear you got everything sorted out.  If you run into other issues along the way just let me know.  Best of luck.

@Wes Drury

Hi Wes, I'm using font awesome! any help would be appreciated! :)

Hi Mustafa, 

If you want to use font-awesome, I think something like this might work:

1) load the font-awesome lib in your HC / document head page, e.g. you could do something like:

<!-- font awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2) reference the icons under your category lists in your home page template, like Wes already showed, and just switch your img to reference the icons

 {{#is name 'Betalning'}}
 <i class="fa fa-money fa-2x"></i> 
 {{/is}}
 {{#is name 'Teknisk support'}}
 <i class="fa fa-life-saver fa-2x"></i>
 {{/is}} 

Resulting in something like below. Then if you want to change the spacing or location of the icons just adjust your CSS accordingly.

Hi @Wes Drury,

I pasted the code from above (and altered it to match our HC/assets) in JS, but nothing came up when I hit "preview." What am I doing incorrectly?

Thank you!

@Jennifer the code above needs to go into your HTML Home page.  There should not be any code via JS.  Are you using Font Awesome icons like Joel in the above code or are you using images that are uploaded to your asset area. 

This was great! Using the Font Awesome icons with my categories BUT I wonder if it's any chance to use like an ID instead of category name {{#is name 'Free Themes'}}. Got multiple languages and it will be a lot of copy/paste managing when adding new languages.

@Jonas - If you have multiple languages then you must use "id" instead of "name".  You can find the id in the URL when you click on a Category.

{{#is id 5678934532}}

@Wes Drury - that's great. Work like a charm, thanks!

@Jonas - Glad to hear if you have any further questions just let me know.

@Wes thanks for the code.  Anyway that this could be modified to work for the entire link as opposed to just an icon inside the box?  I would like to make the rectangle PNG the only thing that appears without the extra wide border.

I currently went from the 2 columns to just 1 column and would love to be able to go back as well.  

Any help would be appreciated!

@Rob - can you send me a screenshot or something as I'm not sure what exactly you are asking.

A picture says 1,000 words doesn't it.  I would like the category name to go away along with the box.

@Rob - Got ya so remove the {{name}} curly bracket and they will get rid of the name.  To get rid of the box you need to edit the CSS file.

In the CSS tab find .blocks-item

and remove the border: 1px solid #0072ef;

Then you should only be left with the link-able image.

awesome.  

My next question is, can I make the category link redirect to a different page?  (make the image act as a hyperlink).

ex: The upper right image should be a shortcut for users to create a ticket as opposed to clicking on the text in the upper right hand corner.

@Rob - Yes you can do this as well with the curlybar framework.  I have some code similar to on my GitHub page.

It may need to be modified a bit in your code but it should be pretty simple to do.  May just need to add the a href line under your {{is}} statement for that block.

@Wes

When I remove the name it dramatically changes the appearance.  Here is the code I have, which line are you referencing removing?

@Rob - lines 56 and 57 should be removed.  I removed those lines on the default theme and it did not effect the box in any kind of way.

@Wes back to the Curlybar Framework, I tried adding in the a href line with on line 45, is this what you meant?  Sorry I am such a noob but I appreciate your help making our site special??

@Rob - Yes but you will need to add </a> at the end of that line.  You may also can just use the curlybar as this might as work as well.

{{link 'new_request' }}

@Rob - don't think the above solution is going to work.  Can you copy and paste the code that's showing in the screenshot here so I can get it and modify it for you.

@Wes yeah it makes it non clickable

{{#each categories}}
<li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#is name 'Submit a support ticket'}}
<a href="https://eclife.zendesk.com/hc/en-us/requests/new" class="blocks-item-link"> </a>
<img src="{{asset 'support.png'}}" />
{{/is}}
{{#is name 'Arena'}}
<img src="{{asset 'arena.png'}}" />
{{/is}}
{{#is name 'General'}}
<img src="{{asset 'knowledge.png'}}" />
{{/is}}
{{#is name 'Finance'}}
<img src="{{asset 'Finance.png'}}" />
{{/is}}
</a>
</li>
{{/each}}
</ul>