Adding category images to the Copenhagen Theme

Answered

90 Comments

  • Wes Drury

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

    0
  • Julie Mendez

    That's great news!  Thanks Wes.

    0
  • Wes Drury

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

    6
  • Wes Drury

    @Julie,

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

    0
  • Andrea Lindquist

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

     

     

     

    0
  • Wes Drury

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

    0
  • Jennifer Rowe

    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!?

     

    0
  • Andrea Lindquist

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

     

    0
  • Andrea Lindquist

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

    0
  • Wes Drury

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

    0
  • Mustafa Habib

    @Wes Drury

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

    0
  • Joel Hellman

    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.

    1
  • Jennifer Eolin

    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!

    0
  • Wes Drury

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

    0
  • Jonas Pålgård

    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.

    0
  • Wes Drury

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

    1
  • Jonas Pålgård

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

    0
  • Wes Drury

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

    0
  • Rob Howell

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

    0
  • Wes Drury

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

    0
  • Rob Howell

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

    0
  • Wes Drury

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

    1
  • Rob Howell

    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.

    0
  • Wes Drury

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

     

    0
  • Rob Howell

    @Wes

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

    0
  • Wes Drury

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

    0
  • Rob Howell

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

    0
  • Wes Drury

    @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' }}

    0
  • Wes Drury

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

    0
  • Rob Howell

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

    0

Please sign in to leave a comment.

Powered by Zendesk