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

19 Kommentare

  • 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
  • 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
  • Pulkit Pandey
    Community Moderator

    Hey Edwin

    Sorry for the late replay, You don't need to resize the Asset picture manually, upload your image in the original size and then achieve this by using CSS.

    Here goes the solution 

    1) Resize image: You can update the max-width value according to your needs 

    .blocks-list img {
      max-width: 100%;
    }

    2) Show only a single heading

    .block-list .blocks-item-description {
        display:none;
    }

    3)  Also this blue highlighting can I change the color? : Replace the below-highlighted color with the color value of your choice 

    .blocks-item:hover {  
    background-color
    : green;
    }

    Note: Please add the following code provided above at the bottom of your style.css file

    Please let me know if it solves your issue 

    Thanks 

    Pulkit

    Team Diziana

     

    1
  • 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
  • David Hunter

    Thank you, Jim. 

    Using Copenhagen 2.3.0 APIv2, I am getting 

    1 error
    'categories' does not exist
    0
  • 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 (1 category called FAQ)

    So question is, can I use the same technique/Code with Sections?

    I tried to replace the code line with:

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

    And uploaded the asset to: section-360003646880.jpg 

    I even tried with sections on both out of desperation but unfortunately, it ain't working DAMNN!!!

     

     

    0
  • Pulkit Pandey
    Community Moderator

    Hey Edwin

    Now, you have to add the following code 

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

    Here the screenshot where you have to add the above code and then upload the image with a suffix of section-<YOUR SECTION ID>

     

    The End Result would be an image on the section 

    Q: 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.

    Answer: Yes, you can manage the size of the image to look professional you have to right the CSS for that 

    Let me know if it solves your issue

    Thanks 

    Pulkit

    0
  • Edwin

    Hi Pulkit!

     

    It did solve the issue, however, the image is HUGE so now I need to be able to control the size of it.

    Can you let me know where I should put the code? 

    Say I want it to look like a decent size?

     

    That size for example?

     

    What's the best procedure?

     

    Thanks in advance.

     
    0
  • Edwin

    Hi again Pulkit,

     

    Actually I fixed the size of the image problem by simply resizing the Asset picture into a 250 pixel one so it looks like this now (see picture below)

    How can I edit the look of it all so it looks better? hmmm How can I have only one title, Where is my Package? /Order Status and perhaps have it black or grey color text? Also this blue highliting can I change the color ?

     

    That's a lot of question I know, but would love to make something that looked a bit better and more professional so we could start using it. If you have any suggestions it will really help.

     

    Thanks again!!

    0
  • Karen Snyder
    Community Moderator

    Hi Edwin

    Pulkit Pandey may want to chime in here, but in the meantime, when you wrote "How can I have only one title, Where is my Package? /Order Status", did you mean that you want just the one tile with the image, or that you don't want Where is your package? to show? If you want just the one tile, the other tiles represent the other sections that you have. If you don't want them to appear, you need to edit those sections and mark them as draft. If you don't want Where is your package? to show, that is the section description, so you need to edit the section to empty the description.

    To change the text color of the title, you need to add CSS like the following to style.css:

    .blocks-item-title: {
      color: black;
    }

    To change the background color of the tile, you need to add CSS like the following to style.css:.

    .blocks-item {
      background-color: yellow;
    }

    Color can be specified as a word as shown above, or you can look up the hex code for the color at this link and use it instead of the word.

    0
  • Edwin

    Hi Pulkit,

    I read again our conversation and now I uploaded assets in another way so I would like to use the following code instead:

      <img src="{{asset 'exchange-icon.svg'}}" width="40" height="40"/>

    With 'exchange.icon.svg' being my asset of course.

    Do you know how I can target a given category in the Homepage_hbs page?

    Because when I add this code under line 16, it applies to all my categories (they would have the same icon), and I have 9 different categories

     

    So how to target a specific category?

    That would be fun to know, also any tips on how to play around to make it look good?

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk