Adding category images to the Copenhagen Theme

Answered

93 Comments

  • Rob Howell

    @Wes

    When I replaced the original code it appears the restrictions I had placed no longer are working correctly.  Do these need added back in to the HTML as well some place?   I tried a little copy and paste and kept messing up the boxes.  

    0
  • Wes Drury

    @Rob - overwrite your code with the code below.

    <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 'Submit a support ticket'}}
    <a href="/hc/en-us/requests" class="blocks-item-link">
    <img src="{{asset 'support.png'}}" />
    </a>
    {{else}}
    <a href='{{url}}' class="blocks-item-link">
    {{#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>
    {{/is}}
    </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>

    Also in the CSS file find the below:

    .blocks-item-link {
    **remove** padding: 20px 30px;
    }

    If you want to talk about your Help Center in general or customization's feel free to come and hang out in my Slack channel.

     

     

    0
  • Eura Szuwalski

    Another great tip from Wes that works perfectly! I did have one question for anyone. If I add my own icons and font awesome icons, the font awesome ones have their automatic inverse color when you hover over them. How do I achieve the same for my personal asset icons? I've tried adding a div around my asset - 

    <div id="gs">
    {{#is id 115000011852}}

    <img class="gs-icon" src="{{asset 'GS_icon_60.png'}}" /></div>

    and adding to CSS

    .gs: hover {
    {background-image:src="{{asset 'GS_icon_inverse_60.png'}}";}
    }

    and 

    .gs:hover { color:white;}

    I know i'm probably making a silly mistake, but aside from creating a new font awesome icon, what's the best way to achieve this hover color change on an asset? 

    0
  • Tehreem Zafar

    Hi Wes,

    First of all thanks for the code. But when i add this code to my HC and link my assets, no image appears above the category heading. Secondly, I do not have PNG icons instead I have SVG icons. So does this work with SVG icons.

     

    0
  • Wes Drury

    @Tahreem - you add images the same, here is some example code where I added images that were svg.

     

    {{#is name 'Getting Started'}}<img class="svg" src="{{asset 'Browser.svg'}}" />{{/is}}
    {{#is name 'Sense App'}}<img class="svg" src="{{asset 'comment.svg'}}" />{{/is}}
    {{#is name 'Sense'}}<img class="svg" src="{{asset 'padlock.svg'}}" />{{/is}}
    {{#is name 'Sleep Pill'}}<img class="svg" src="{{asset 'heart.svg'}}" />{{/is}}
    <h4><a href="{{url}}">{{name}}</a></h4>

    0
  • Felix

    @Wes, I followed this guide. But no images showes up for me. Am I missing something?

    EDIT: I see that it gets poorly formated when I copy paste. Test this fiddle instead https://jsfiddle.net/58y0zj66/

    <section class="categories blocks">
    <ulclass="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    <liclass="blocks-item">
    <ahref='{{url}}'class="blocks-item-link">
    {{#is name 'Abonnemang'}}
    <imgsrc="{{asset '//p3.zdassets.com/hc/theme_assets/1083274/115000066685/Black-Fello-ICONS-2017-01.png'}}" />
    {{/is}}
    {{#is name 'Betalning'}}
    <imgsrc="{{asset '//p3.zdassets.com/hc/theme_assets/1083274/115000066685/chat.svg'}}" />
    {{/is}}
    {{#is name 'Beställning'}}
    <imgsrc="{{asset '//p3.zdassets.com/hc/theme_assets/1083274/115000066685/chat.svg'}}" />
    {{/is}}
    {{#is name 'Teknisk support'}}
    <imgsrc="{{asset '//p3.zdassets.com/hc/theme_assets/1083274/115000066685/chat.svg'}}" />
    {{/is}}
    {{#is name 'Utomlands'}}
    <imgsrc="{{asset '//p3.zdassets.com/hc/theme_assets/1083274/115000066685/chat.svg'}}" />
    {{/is}}
    {{#is name 'Artiklar'}}
    <imgsrc="{{asset '//p3.zdassets.com/hc/theme_assets/1083274/115000066685/chat.svg'}}" />
    {{/is}}
    <h4class="blocks-item-title">{{name}}</h4>
    <pclass="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{else}}
    {{#each sections}}
    <liclass="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
    <ahref='{{url}}'class="blocks-item-link">
    <h4class="blocks-item-title">
    {{name}}
    {{#if internal}}
    <spanclass="icon-lock"title="{{t 'internal'}}"></span>
    {{/if}}
    </h4>
    <pclass="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>
    0
  • Wes Drury

    @Felix - Looks like you are calling your images incorrectly.

    It should look like the following:  You don't need the full path to your image.

    {{#is name 'Utomlands'}}
    <img src="{{asset 'chat.svg'}}" />
    {{/is}}
     
    If this doesn't solve your issue please post the URL to your Help Center so I can inspect the code and see what's going on.
    0
  • Felix

    @Wes, Yes it was pathing error. Thanks!

    0
  • Wes Drury

    @Felix - You're welcome and best of luck.

    0
  • Westley Hatch

    Hi Wes,

    I got my images loaded but they are stretching and over lapping the other images and categories. How do I resize the image and the size of the category boxes for better display?  

     

    Thanks

    Westley

    0
  • Wes Drury

    @Westley - You can resize the images via CSS.

    0
  • Isabella V

    HI there, 

    I had this all setup and working perfectly until the last Zd theme update and the icons only show as an error. (see image attached) Could you advise as to the required adjustment? Thanks!

    0
  • Trapta
    Community Moderator

    Hey @Isabella V,

    Looks like we already have a tip for this from one of our community members. Take a look - Adding images/icons into the Copenhagen Theme

    Thanks

    0
  • Isabella V

    Thanks, Trapta. I tried to apply that, but something isn't quite right and I'm still getting the error images above. Please help! :) Here's my code: 

    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <!--Images for categories Home Page -->
    {{#is id 200400187}}<img class="" src="{{asset 'skillup_b.png'}}" />{{/is}}
    {{#is id 200423338}}<img class="" src="{{asset 'innovation_b.png'}}" />{{/is}}
    {{#is id 115002189847}}<img class="" src="{{asset 'timetable_b.png'}}" />{{/is}}
    <!--End images for categories -->
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/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 community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

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

    <section class="section activity">
    {{recent_activity}}
    </section>
    </div>

    0
  • Trapta
    Community Moderator

    @Isabella V, can you share the URL of your HC or a screenshot of what exactly is happening so that I can help you in sorting it out? 

    Thanks

    0
  • Isabella V

    @Trapta, yes, thanks. I added icons to the first three category boxes and it worked perfectly until the recent theme update. Now I get this: 

    0
  • Trapta
    Community Moderator

    @Isabella please share the HC url.

    Thanks

    0
  • Isabella V

    @Trapta

    https://company.zendesk.com/hc/en-us

    0
  • Trapta
    Community Moderator

    @Isabella do you have these assets in your HC?

    0
  • Isabella V

    Yes. @Trapta

    0
  • Trapta
    Community Moderator

    @Isabella I see there is a difference in asset name and the one you wrote in your code.

    Thanks

    0
  • Isabella V

    @Trapta

    I tried to update according to the tutorial here. I'm not seeing the difference in asset name to which you refer. Could you be more specific? :)

    Thanks!

    0
  • Trapta
    Community Moderator

    @Isabella, try this -

    {{#is id 200400187}}<img class="" src="{{asset 'SkillUp_b.png'}}" />{{/is}}
    {{#is id 200423338}}<img class="" src="{{asset 'Innovation_b.png'}}" />{{/is}}
    {{#is id 115002189847}}<img class="" src="{{asset 'Timetable_b.png'}}" />{{/is}}

    0
  • Isabella V

    @Trapta

    Hooray! It worked! Thank you. :)

    Was it only the difference in capitalization, or did I miss something else? 

    Thanks!

    0
  • Trapta
    Community Moderator

    @Isabella, yes it was only the difference in capitalization.

    Glad it worked for you. Enjoy!

    Thanks

    0
  • Isabella V

    @Trapta

    Lesson learned! Thank you!!

    0
  • Rob H.

    I'm in the process of implementing this on our Help Center and am trying to figure out if there is a way to show a different image based on the language. 

    The images work perfectly, I just can't figure out what the conditional statements should be. 

    I am using the ID method instead of the name, so perhaps using the name will make it easier? 

    0
  • Jessie Schutz
    Zendesk team member

    Hi Rob! Welcome to the Community!

    I would imagine that this is possible with JavaScript, but I don't know enough about it to say for sure. I'm going to check with our Community Moderators to see if they can provide some insight on this!

    0
  • Vladan Jovic
    Community Moderator

    Hi Rob, there are few ways to achieve that, but maybe easiest:

    - put two images for every category

    - make display: none for both

    - make to shows only needed image per lang with little css like:

    html[lang="en-US"] .category .english-image {display: inline-block;} or 
    html[lang="de"] .category .german-image {display: inline-block;} or
    html[lang="fr"] .category .french-image {display: inline-block;} or ...

    Hope this helps! :)

    0
  • Rob H.

    @Vladan Thank you. I think I'm almost there but I'm not certain how to reference the category id in the css section. 

    0

Please sign in to leave a comment.

Powered by Zendesk