Adding category images to the Copenhagen Theme

Answered

110 Comments

  • Ruthy Licht

    Thank you so much Wes Drury!

    Just to let you and everyone know- this still works on the current version. Thank you for this you saved me :)

    0
  • Wes Drury

    Ruthy Licht - Glad to hear this helped your additions to your Help Center.  Best of luck to you. You can find my other guide here.

    1
  • Devan - Community Manager
    Zendesk Community Team

    On Wednesday, February 5, from 10:00am-12:00pm CST, we'll have a special guest team of experts on hand to answer your questions about Support: Triggers and Email Workflows in your Zendesk Support instance for an AMA-style conversation!

    Just click the "new post" button and write up your question. Be sure to be as detailed as possible. The best questions include: 

    • What it is you're trying to do
    • What you've tried so far 
    • Any other context or relevant information
    • Screenshots, if you have them

    Questions posted to this topic in advance of the start time will be answered first thing on the 5th, so if you've got something you want our experts to look at, post it today!

    0
  • Boby Bravo

    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 online. 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
  • Rob H.

    Boby Bravo I remember seeing something similar to your ask a couple years ago but this is the closest I can find now: https://support.zendesk.com/hc/en-us/community/posts/360050930994-Add-a-background-image-on-the-category-blocks-

    0
  • Donald Cornel

    Hello,

    Can someone here has tried to make it 4 items per row?

    Because I think the max by default is 3 only.

    Thanks.

    0
  • Antwon Davis

    Hi, we've tried to add our icons to our Help Center and it's not working. I've looked all over this forum and can't figure out exactly where this code needs to be added and if the code we're using is correct. Can someone tell us which file and where this code needs to be added? And is the code below written correctly?

     

    {{#each categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    {{#is name 'Account Management'}}
    <img src="{{asset 'Account-Icon-1-White.png'}}" />
    {{/is}}
    {{#is name 'How to Guides'}}
    <img src="{{asset 'Guides-Icon-1-White.png'}}" />
    {{/is}}
    {{#is name 'Devices and Apps'}}
    <img src="{{asset 'Devices-Icon-1-White.png'}}" />
    {{/is}}
    {{#is name 'Troubleshoot'}}
    <img src="{{asset 'Troubleshoot-Icon-1-White.png'}}" />
    {{/is}}
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}

    0
  • Bruce Michelsen

    You can add images to the categories on the home page by editing the home_page.hbs template file. Look for the <li class="blocks-item"> inside the {{#each categories}}, then add your code for adding images. 
    For example, here's an excerpt from my code. (Note that I'm using is id instead of is name.)

                <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">

    {{#is id 360002010174}} {{!-- Getting Started --}}
    <img src="{{asset 'category_gettingstarted_berry.png'}}" class="home-page-images" />
    {{/is}}
    ...

     

    0
  • Antwon Davis

    Thanks Bruce. We were able to get the icons on the homepage. Now we're trying to figure out how to fix the size of the icons. They're all stretched and pixelated. Does anyone know exactly where we need to go to edit the code to fix the sizing? And what's an example of the code to use?

     

    0
  • Bruce Michelsen

    Sizing can be done using the style.css file. In my example, I used class="home-page-images". Edit the style.css and search for that. Then you can set width and height. For example:

    .home-page-images {
    width: 128px;
    height: 128px;
    }

     

    0
  • Antwon Davis

    Ok. I'm searching now. "home-page-images" doesn't exist currently in the style.css. Are you saying to just add it?

    0
  • Bruce Michelsen

    Just add it in. (I couldn't remember if it's a theme default or one I added.)

    0
  • Antwon Davis

    I've added the code and it didn't change anything. See screenshots below.

    0
  • Bruce Michelsen

    Are you setting the class="home-page-images" where you specified the image?

    <img src="{{asset 'Troubleshoot-Icon-1-White.png'}}" class="home-page-images" />
    0
  • Marius Tendick

    Hi,

    I'm also trying to add icon to the categrory and used the code provided by Wes Drury but it doesn't work.

    I receive this error:

    1 error
    .. {{/ `if` }} .. is not permitted in this context in line 38
     
    Here is the code that I'm using in home_page.hbs

    <h1 class="visibility-hidden">{{ help_center.name }}</h1>

    <section id="main-content" class="section hero">
    <div class="hero-inner">
    <h2 class="visibility-hidden">{{ t 'search' }}</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false instant=settings.instant_search class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    {{#is name 'Delivery'}}<img src="{{asset 'free-delivery-truck-icon-2049-thumb.png'}}" />

    </li>
    {{else}}
    {{#each sections}}
    <li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    {{#if promoted_articles}}
    <section class="articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section home-section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section home-section activity">
    {{#if settings.show_recent_activity}}
    {{recent_activity}}
    {{/if}}
    </section>
    </div>

    I hope someone can help me with this issue ;) Thanks.

     

    0
  • Bruce Michelsen

    Make sure you close the is statement:

    {{#is name 'Delivery'}}
    <img src="{{asset 'free-delivery-truck-icon-2049-thumb.png'}}" />
    {{/is}}

    0
  • Marius Tendick

    Bruce Michelsen

    Thank you so much!

    It's working now 

    0
  • Marius Tendick

    Hi Bruce Michelsen,

    I actually have another issue now with the icon after using your code to limit the size. Now the icon in not in the center anymore:

    .home-page-images {
    width: 128px;
    height: 128px;
    }

    Any idea why and how to fix it?

    0
  • Marie-Cathrine Sørensen
    Community Moderator

    Hi Marius Tendick,

    Try adding:

    align-items: center;

    to the .blocks-item-link class in the CSS. This should center the image.

    #helpsome regards,
    Marie-Cathrine Sørensen
    Developer @ helphouse.io

    0
  • Marius Tendick

    Hi Marie,

    Thank you for your help!

    Cheers,

    Marius

    0

Please sign in to leave a comment.

Powered by Zendesk