Adding category images to the Copenhagen Theme

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

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 :) !

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,

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. 

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

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

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

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?  

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

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:

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

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

@Wes Drury Thank you that solved the issue! 

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

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

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!

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

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.

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

@vladan

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

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

Thanks!

Apologies, here is where the error is showing up:

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

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>

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>

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

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

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

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

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

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.

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