Adding category images to the Copenhagen Theme
回答済みHello,
Is it possible to add icon images to the category boxes in the Copenhagen theme?
I would like add small icon images above the category title. I would like a different image for each box. I read through this article but it didn't work.... Any help would be great...
Thank you!
Julie
-
@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.
-
@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.
-
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?
-
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.
-
@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> -
@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> -
@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. -
@Wes, Yes it was pathing error. Thanks!
-
@Felix - You're welcome and best of luck.
-
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
-
@Westley - You can resize the images via CSS.
-
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!
-
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
-
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> -
@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
-
@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:
-
@Isabella please share the HC url.
Thanks
-
@Isabella do you have these assets in your HC?
-
Yes. @Trapta
-
@Isabella I see there is a difference in asset name and the one you wrote in your code.
Thanks
-
@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!
-
@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}} -
@Trapta
Hooray! It worked! Thank you. :)
Was it only the difference in capitalization, or did I miss something else?
Thanks!
-
@Isabella, yes it was only the difference in capitalization.
Glad it worked for you. Enjoy!
Thanks
-
@Trapta
Lesson learned! Thank you!!
-
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?
-
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!
-
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! :)
-
@Vladan Thank you. I think I'm almost there but I'm not certain how to reference the category id in the css section.
サインインしてコメントを残してください。
113 コメント