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

9 Commentaires

  • 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

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk