How to add a Images or Font Icons on the Category Blocks of homepage

13 Comments

  • Brett Bowser
    Zendesk Community Team

    Hey Ronit,

    I would recommend taking a look at this community post as it may point you in the right direction: Copenhagen Theme, fill category with Image

    I'm limited on what I can assist with on my end but hopefully the above helps!

    I'll keep this post open in case others have additional guidance to provide :)

    0
  • Jim Davenport

    Hey Ronit,

    Depending on your specific requirements, it's actually possible to dynamically add category and section images/icons without any custom JavaScript.  The trick is to use the {{asset}} helper and its suffix and prefix attributes.

    For example, in the default Copenhagen theme you could use something like:

     <ul class="blocks-list">
      {{#each categories}}
        {{#if ../has_multiple_categories}}
          <li class="blocks-item">
            <a href='{{url}}' class="blocks-item-link">
    <img src="{{asset @index prefix='category-' suffix='.svg'}}"/>
    <span class="blocks-item-title">{{name}}</span>
              <span class="blocks-item-description">{{excerpt description}}</span>
            </a>
          </li>
        {{else}}
          {{#each sections}} ... {{/each}}
        {{/if}}
      {{/each}}
    </ul>

    What this does is look for theme assets based on the index, or position, in the category loop.  The count starts at 0, so in your theme assets folder you would add images like:

    category-0.svg

    category-1.svg

    and so on.

    Of course you can use different prefixes and suffixes (file types) as required.

    Instead of using the "index" property, you could use a category object property like id, in which case your images would be added to the asset directory with a naming convention of:

     category-{id}.svg

    where {id} is the ID of the associated category:

    We describe advanced use of the Zendesk theme asset helper in more detail on our website.

    For more complex use-cases, as demonstrated in our Azura theme, we've developed a JavaScript theme plugin as part of our theme customization framework for adding images/icons anywhere in the Help Center, including dynamic category and section lists.  It also does a few fancy things like replace <img> tags with inline SVG, which allows you to have the color or fill of SVG images change on hover.

    I hope that helps!

    1
  • David Hunter

    Thank you, Jim. 

    Using Copenhagen 2.3.0 APIv2, I am getting 

    1 error
    'categories' does not exist
    0
  • Jim Davenport

    Hi David Hunter

    You'll need to make sure you’re adding the code to the Home page, which has access to the categories collection which you can loop through using the {{each}} helper.  By default, the Copenhagen theme should already have a loop referencing the categories, so you just need to modify that to include your image.

    The relevant section of the Home page template in Copenhagen is here:

    Of course this same technique can be used on other pages by looping over other object types.

    1
  • David Hunter

    Thank you, Jim.  I had it in the wrong spot!  

    0
  • Ronit

    Hey Jim Davenport

    Thanks, for your replay and it works like a charm

    I have one another Question, Hope you can assist me with this :)

    I there a way to add a Font icon (Font Awesome) on the category block dynamically as you suggest for the Images

     

    Thanks 

    Ronit 

    0
  • Jim Davenport

    Hi Ronit

    This method allows you to loop over categories and make use of information available about them (position, ID, name etc.) to construct asset references.  You could use this to generate a dynamic class name in the loop, for example:

    <i class="fa fa-category-{{id}}"></i>

    However these won't align with the predefined Font Awesome class names.

    One option would be to generate class names in this way and then update your theme's CSS file, copying the styles associated with your desired icon (e.g., fa-camera):

    .fa-category-12345 {...FA styles for chosen icon here...}

    Where 12345 is the ID of your category.

    Hope that helps!

    Cheers,

    Jim.

    0
  • Edwin

    Hi Jim,

     

    I've tried your method, however, it wasn't successful for me unfortunately.

    I copy pasted the code you provided.

     

    Then I even names each pictures: Category-0, Category-1 and so on to try. 

    Those files were .jpg files but I rename them to .svg and uploaded them in the assets. 

    Result is 0 change.

     

    I wonder if I would ever solve this issue. I'm quite desperate...

    0
  • Pulkit Pandey
    Community Moderator

    Hey Edwin

    Just replace the image tag which you have pasted with the following one I am listed below and follow the steps to add an image

    <img src="{{asset id prefix='category-' suffix='.jpg'}}" />

    Then, Rename your image with category-<ID OF YOUR TARGET CATEGORY>.jpg, like below, and upload into the asset folder

    category-360005641173.jpg

    Let me know if it solves your issue

    Thanks 

    Pulkit

    0
  • Edwin

    Pulkit Pandey Hi! I highly appreciate your help. However, it still didn't work out. No result yet.

    I replaced the line you told me to on Home_page -

     

    <img src="{{asset id prefix='category-' suffix='.jpg'}}" />

    Then I Uploaded this file as an asset:  category-360003646880.jpg

     

     

    It didn't work out so then I even replaced the code on Home Page with:

     

    <img src="{{asset id prefix='category-360003646880' suffix='.jpg'}}" /> 

     

    But nothing shows.... 

    Damn Feel like I was close this time!

     

    Let me know what you think mate. Thanks again! 

     

     

    0
  • Pulkit Pandey
    Community Moderator

    Hey Edwin

    Happy to help you mate :)

    Can you please clear that how many categories you have on your HC, If you have a single category then it will show the sections of that category instead of the category.

    The same thing has worked for me, I am using the Copenhagen theme and placed the img tag which I had shared on the homepage, then I Upload the image wit the category id in my case that is category-360003192554.jpg, which I have highlighted on the screenshot

    i.e: 

    <img src="{{asset id prefix='category-' suffix='.jpg'}}" />

    Here the screenshot 

     

     

    And, after completing the above steps here goes the Result

    Let me know if it solves your issue

    Thanks 

    Pulkit

    0
  • Edwin

    Dear Pulkit,

     

    Thanks again, but it's quite strange as I do have exactly the same settings as you:

     

     

     

     

    And the result is exactly the same ( No image displayed)

     

     

    When and if I manage to display an image for a given category (in this case the first one)

     

    Will I be able to control de size to make it look good and professional? Obviously, I'm just trying to get this interface to look better with nice images representing each topic.

     

    I really appreciate the help here! Thanks again

    0
  • Edwin

    Hey Again! 

    I actually found the issue. These are not Categories but it is Sections

    I only use Articles in 9 different Sections (0 category) So question is, can I use the same technique/Code with Sections?

     

     

     

    0

Please sign in to leave a comment.

Powered by Zendesk