Adding category images to the Copenhagen Theme

Answered

93 Comments

  • Jessie Schutz
    Zendesk team member

    Hey Rob! I'll see if Vlad's around to look at this for you. Stand by!

    0
  • Vladan Jovic
    Community Moderator

    Hi Rob! Hmm, I don't think you need the category IDs. The only thing you should actually do is to:

    - Hide all category images (regardless of the language),
    - Show all category images for the current language (with a help of the CSS snippet that I've provided earlier).

    If this doesn't help please show us your code, would be much easier to sort things out :) !

    0
  • Alex Richards

    Hey All,

    I'm looking to replace up on mouse over/hover the custom images i have inplace. So essentially I want to swap block item image upon hover to a different version, do you have some css or something that can help me out.?

    Currently for the block items, I have them set up like this:

    <!--Images for categories Home Page --> 
    {{#is id 115002400667}}<img class="" src="{{asset 'GettingStarted01.png'}}" />{{/is}}
    {{#is id 360000093153}}<img class="" src="{{asset 'Agent01.png'}}" />{{/is}}
    {{#is id 360000093253}}<img class="" src="{{asset 'Admin01.png'}}" />{{/is}}
    {{#is id 115000335327}}<img class="" src="{{asset 'Developer01.png'}}" />{{/is}}
    <!--End images for categories -->

     

    Thanks,

    0
  • Mike Tamosaitis

    In the humble squid theme, I was able to change the images displayed based on the language that was selected. Is that still an option in this new Copenhagen theme. I tried moving the js code over with no luck. 

    0
  • Rob H.

    Mike, I don't know if there is a more elegant way to do it but this is how we solved it. For some we were able to use ID instead of name when it worked across everything but there are about 15 of these blocks in our code and it works really well. 

    This starts right under the  <a href='{{url}}' class="blocks-item-link"> line in the <div class="container"> section of home_page.hbs. 

     

    {{! Category Name}}
    {{#is name 'English Name'}}
    <img src="{{asset 'English_Logo.png'}}" />
    {{/is}}
    {{#is name 'French Name'}}
    <img src="{{asset 'French_Logo.png'}}" />
    {{/is}}
    {{#is name 'Italian Name'}}
    <img src="{{asset 'Italian_Logo.png'}}" />
    {{/is}}
    {{#is name 'German Name'}}
    <img src="{{asset 'German_Logo.png'}}" />
    {{/is}}
    {{#is name 'Spanish Name'}}
    <img src="{{asset 'Spanish_Logo.png'}}" />
    {{/is}}
    0
  • Mike Tamosaitis

    Rob, 

    This might work for me but I think where I will run into an issue is some of my categories have the same name regardless of the language because there is no direct translation in these different langauage because the caterogry name is something our company created. Hope that makes sense

    0
  • Rob H.

    Absolutely. We have those as well, at least where the image doesn't need to change based on language. In that case we use ID and only have to do it once for the category. 

     

    {{! Category Name}}
    {{#is id 115000426353}}
    <img src="{{asset 'General_Logo.png'}}" />
    {{/is}}
    0
  • Mike Tamosaitis

    Rob,

    Thanks for the help but I have a question not related here but do you by chance know how I could break up the categories into different sections on the homepage?  

    0
  • Oric

    Hi, Can someone direct me regarding the iframe link, where's the "src" should direct to? url I guess is to my external PDF that I want displayed, but it does not work for me

     

    <iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
     
     
    0
  • Sam Davis

    Hello, The following didn't work for me:
    https://community-tutorial.zendesk.com/hc/en-us/articles/115004178674-Adding-Images-in-Copenhagen-theme#bottom

    I added the following code to my home_page.hbs:

    {{#is id 360000487332}}<img class="" src="{{asset 'USB-Hubs.png'}}" />{{/is}}
    {{#is id 360000540492}}<img class="" src="{{asset 'USB-Hubs.png'}}" />{{/is}}
    {{#is id 360000554051}}<img class="" src="{{asset 'Audio.png'}}" />{{/is}}
    {{#is id 360000540552}}<img class="" src="{{asset 'Hard-Drive-Accessories.png'}}" />{{/is}}
    {{#is id 360000540532}}<img class="" src="{{asset 'Chargers.png'}}" />{{/is}}
    {{#is id 360000554071}}<img class="" src="{{asset 'Cables.png'}}" />{{/is}}
    {{#is id 360000554111}}<img class="" src="{{asset 'Universal-Docking-Stations.png'}}" />{{/is}}
    {{#is id 360000554091}}<img class="" src="{{asset 'Mounting-Brackets.png'}}" />{{/is}}
    {{#is id 360000540572}}<img class="" src="{{asset 'Bluetooth-Adapters.png'}}" />{{/is}}



    But there's no change at all. :( any suggestion?

    0
  • Wes Drury

    @Sam - Thanks for providing the code and screenshots for me.  So the tutorial you referenced is for adding category images which by the way works very well.  If you look at your screenshot line 21 it has {{#each sections}}.  Copy and paste all your if statements up a few lines under the area that says {{#each categories}}.  That should get you squared away and the tutorial you referenced is the best resource for adding images as you can do it with JQuery or the IS statements like you currently have.

    1
  • Sam Davis

    @Wes Drury Thank you that solved the issue! 

    Is there a way to configure that when hovering the category the png will turn white? 

    0
  • Trapta
    Community Moderator

    Hi @Sam,

    The code in your home_page.hbs change it to -

    {{#is id 360000487332}}
    <img class="icon" src="{{asset 'USB-Hubs.png'}}" />
    <img class="hover-icon" src="{{asset 'HOVER_ICON'}}" />
    {{/is}}

    And add it at the bottom of your style.css -

    .blocks-item:hover .hover-icon {display: block;}
    .hover-icon, .blocks-item:hover .icon {display: none;}

    Let me know if you face any issue.

    Team Diziana

    0
  • valiky

    Hi Wes,

     

    Thanks for the code example, I used it and it's really great.

     

    Is there a way to make the images load faster?

    When I first enter the home page, I can see the cubes shaping up and then the images load.

    Overall 8 png images, up to 4kb each (typically 2kb).

     

    Thanks!

    0
  • Trapta
    Community Moderator

    Hi @valiky,

    Are you using {{#is id ID}}<img class="" src="{{asset 'icon.png'}}" />{{/is}}  code to show category icons? If yes, I don't think it should take much time.

    If you are using some other code, then try putting the code right next to the img or li element.

    Thanks

    0
  • Kristen Guttilla

    Hello,

    I have used the code described in this article but my images are not showing up. Can someone please provide some guidance on what to do next? Below is a screenshot. Thank you!

    Note, I am getting an error saying 'categories' does not exist.

     

    0
  • Vladan Jovic
    Community Moderator

    Hey, Kristen, I can't see the whole your code but this in red you don't need: https://cl.ly/cbcddd1c8626

    and just mode the IF line before your EACH line (as on the screenshot). 

     

    0
  • Kristen Guttilla

    @vladan

    Here is my updated code with entire string - and still getting an error:

    .. {{/ `if` }} .. is not permitted in this context

    Thanks!

    0
  • Kristen Guttilla

    Apologies, here is where the error is showing up:

    0
  • Vladan Jovic
    Community Moderator

    Ahh I see, many things are not good there, could you please just send me the whole code?

    I think it would be the easiest way :D

     

    0
  • Kristen Guttilla

    Thanks for your help - see below!

     

    <section class="section hero">
    <div class="hero-inner">
    {{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">
    {{#if ../has_multiple_categories}}
    {{#each categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    {{#is name 'Getting Started'}}
    <img src="{{asset 'GettingStarted.png'}}" />
    {{/is}}
    {{#is name 'Using Method'}}
    <img src="{{asset 'UsingMethod.png'}}" />
    {{/is}}
    {{#is name 'Resources'}}
    <img src="{{asset 'Resources.png'}}" />
    {{/is}}
    {{#is name 'Training'}}
    <img src="{{asset 'Training.png'}}" />
    {{/is}}
    {{#is name 'FAQ'}}
    <img src="{{asset 'FAQ.png'}}" />
    {{/is}}
    {{#is name 'Announcements'}}
    <img src="{{asset 'Announcements.png'}}" />
    {{/is}}
    {{#is name 'Supplier Support'}}
    <img src="{{asset 'Support.png'}}" />
    {{/is}}
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </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}}
    {{/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}}

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

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

    0
  • Vladan Jovic
    Community Moderator

    Please try with this one:

    <section class="section hero">
    <div class="hero-inner">
    {{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}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    {{#is name 'Getting Started'}}
    <img src="{{asset 'GettingStarted.png'}}" />
    {{/is}}
    {{#is name 'Using Method'}}
    <img src="{{asset 'UsingMethod.png'}}" />
    {{/is}}
    {{#is name 'Resources'}}
    <img src="{{asset 'Resources.png'}}" />
    {{/is}}
    {{#is name 'Training'}}
    <img src="{{asset 'Training.png'}}" />
    {{/is}}
    {{#is name 'FAQ'}}
    <img src="{{asset 'FAQ.png'}}" />
    {{/is}}
    {{#is name 'Announcements'}}
    <img src="{{asset 'Announcements.png'}}" />
    {{/is}}
    {{#is name 'Supplier Support'}}
    <img src="{{asset 'Support.png'}}" />
    {{/is}}
    <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}}

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

    <section class="section activity">
    {{#if settings.show_recent_activity}}
    {{recent_activity}}
    {{/if}}
    </section>
    </div>
    0
  • Kristen Guttilla

    It worked! Thank you so much :) :) :) So helpful!!! 

    1
  • Vladan Jovic
    Community Moderator

    0
  • Paul Leverett

    This has been a really useful thread, thanks to everyone who has contributed. I added images to my categories without difficulty, and then made it work in multiple languages by using Category id instead of title. So far, so good, very pleaaed with the results. :)

    But of course we always want more. I re-purposed the "promoted articles" feature and changed it a little to show "Videos" instead of promoted articles and a video camera icon after the title.

    But now I would like to do something similar for highlighting articles with downloadable attachments (ie pdf manuals). Is there any way of doing something like this...?

      <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
    <a href="{{url}}" class="article-list-link">{{title}}</a>
    {{#if promoted}}<i class="fas fa-file-download"></i>
    {{/if}}
    </li>

    ... but instead  of "#if promoted" I want to use either a label or a partial text match - something like

    {{#if label "manual"}}

    or wilcards like..

    {{#if title like "*manual*"}}

    Is there anything that can help me with this?

    Many thanks,

    Paul

    0
  • Trapta
    Community Moderator

    Hi @Paul,

    You can try something like below:

    {{#each labels}}
    {{#is identifier 'pdf'}}<i class="fas fa-file-download"></i>{{/is}}
    {{/each}}

    Let me know if this solves your issue.

    Team Diziana

    0
  • Cody Howser

    Is there a way to apply this same logic to the Categories page? For example, here is my page that contains the sections and articles. 

    For example, I would like to know if we could make our sections, such as "Getting Started" and "Managing Your Account" to look like our home page. User could simply click the box and it would take them to the Sections page. Here is my Home Page. 

    Thank you for all your help so far on this thread!!

    0
  • Trapta
    Community Moderator

    Hi @Cody Howser

    Replace the code of your category_page.hbs with the below code:

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

    <div class="container">
    <nav class="sub-nav">
    {{breadcrumbs}}
    </nav>

    <div>
    <header class="page-header">
    <h1>{{category.name}}</h1>
    {{#if category.description}}
    <p class="page-header-description">{{category.description}}</p>
    {{/if}}
    </header>

    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    </div>
    </div>

    Let me know if you face any issues.

    Team Diziana

    0
  • Cody Howser

    Hi @Trapta 

     

    Thank you so much, and it works great! Is it possible to get the category page to display at least 3 blocks instead of 2? I'm trying to figure out how to limit the empty space.

    0
  • Trapta
    Community Moderator

    Hi @Cody Howser

    It should show three blocks for the categories. However, it is not, then look for .blocks-item in your style.css file and update the value of flex with flex: 1 0 320px;

    Let me know if this solves your issue.

    Team Diziana

    0

Please sign in to leave a comment.

Powered by Zendesk