• Karen D Snyder

  • 16. September 2020 00:16

  Edwin, could you post more of the code that isn't working, starting with the {{#each sections}}?

• Ifra Saqlain

  • 18. September 2020 14:32

  Community Moderator

  

  

  It's really great tip and adding icons in category blocks is working : 

  Adding Images/Icons Into the Copenhagen Theme

   

  @Edwin just follow these steps that's belongs to above tip:

  Step 1 : Add this JQuery code on your homepage at the bottom.

  <script>
    $(document).ready(function(){
    $('.icon').each(function (idx, itm){
      var categoryID = $(this).attr('data-title');
      $(itm).attr('src', categoryIcons[categoryID]);
    });
    });
  </script>

   

  Step 2 : Add JQuery Library on your document_head.hbs.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

   

  Step 3 : Add this Category IDs on your document_head.hbs template.

  <script>
    var categoryIcons = {
      "360004039672" : "{{asset 'download.jpg'}}",
      "360003781252" : "{{asset 'download-first.jpg'}}",
      "360003781212" : "{{asset 'download-second.jpg'}}"
    }
  </script>
  
  Update IDs as per your Guide ( category Ids )

   

  Step 4 : Add this code on your home_page.hbs inside the blocks like:

  <li class="blocks-item">
  
  <a href="{{url}}" ...........>
  
   <img src="{{asset 'download.jpg'}}" class="icon " data-title="{{id}}">

   

  Step 5 : All images should be added in your assets folder of your HC.

   

  If any query let me know.

   

  Thanks

  Team

• Jim Davenport

  • 22. September 2020 11:00

  For those that are having trouble with the approaches described above, or would prefer one that's a little simpler and doesn't rely on JavaScript, check out my response to a similar question.

• Robert

  • 20. Oktober 2020 12:14

  @... Thanks a lot for taking some time to explain to me (a non-coder) person. Unfortunately, I followed your steps and it didn't work out for me.

   

  I was able to see Enormous pictures (the same one as I only used one picture link), it's not at all what I want.

   

  I'm guessing what I want is too complicated to do, though it feels that it shouldn't be that hard. In the end I'm only trying to remove these Ugly buttons and customize them.

  I followed your steps, but it doesn't work.

   

  If you can let me know EXACTLY what code to put so I can get at least one section customised, I would follow the logic and do it for all other boxes. But yeah I'm doubting I will manage to fix this. Quite disappointed.

  Feel free to get back to me.

   

• Brett Bowser

  • 20. Oktober 2020 15:00

  Zendesk Community Manager

  Hey Edwin,

  Did you get a chance to look at Jim's response here?

  Let us know if you still are unable to get this working properly.

  Cheers!

• Liz W

  • 25. November 2020 17:54

  Hello, @... and all!

  Question, perhaps a rookie one, from CSS beginner: In the first method, where is the code for adjusting the image size supposed to go? Not sure if that's somewhere in the home_page.hbs file, or in the style.css file, or somewhere else.

  I successfully added icons to my home page category buttons by following your guidance. Thank you!

  I would like to make them smaller. You instructed that we should add the following:

  .categories .blocks-item-link {
    display: flex;
    align-items: center;
  }

  .blocks-item img, .category-page-images, .section-page-images {
    margin-right: 20px;
    width: 32px;
    height: 32px;
  }

  I think I only need part of this, as I only want to change the image size, not the placement or alignment. But I am unclear as to where it is supposed to go. My first attempts have not gone well! I'd love any guidance you can give.

• Pulkit Pandey

  • 15. Dezember 2020 14:09

  Community Moderator

  Hi Liz W

  Happy to help you here, are you using font icons or image on your category block ??

  or replace the below code with your existing one and let me know that it solves your issue

  .blocks-item img, .category-page-images, .section-page-images {
    margin-right: 20px;
    width: 32px;
    height: 32px;
    max-width:70%;
  }

   

  Is it possible to share your HC URL where you are adding those images so that I can hop into it and provide you a solution.

  Thanks 

  Pulkit

• Liz W

  • 16. Dezember 2020 18:07

  Thanks Pulkit!

  I am using images for my category icons.

  I do not have the code I mentioned above in my Help Center yet, as I am unclear where it should go - or if it is already there I have not been able to find it.

  Could you clarify for me which file I should be adding this to? That is probably a beginner question; I'm a beginner! :) 

  I'll try adding the max-width percentage you suggested once I'm clear where I should try this sizing code.

  We actually haven't launched the Help Center yet, and it's signed-in users only (since it's for customers with an existing subscription to my clients' software), so I can't provide a functioning link for you to look at, unfortunately! 

  Liz

   

• Trapta Singh

  • 17. Dezember 2020 06:08

  Community Moderator

  Hi @Liz,
  You need to add these changes in style.css file which you can find once you edit the theme.

  Let us know if this helps.

  Thanks

• Liz W

  • 17. Dezember 2020 19:57

  Hey Trapta,

  Thanks so much! That worked. I was thinking I had tried adding it to the style.css file previously without success, but one way or another it worked this time. Since I'm focused on the layout on the home page blocks and want the icon to be centered in the block, I removed the "margin-right" attribute.

  The sizing is much nicer now :)

   

• Kathy Mashalla

  • 17. Juni 2022 16:12

  Is it possible to add gifs or loops to articles? 

• Dave Dyson

  • 17. Juni 2022 22:10

  Hi Kathy,
   
  Yes, you can insert animated gifs in your articles: Inserting images in articles
   
  (For an example, see Announcing improved visibility of content blocks placement)
  
• Manuel Moreira

  • 19. Mai 2023 08:32
  • Bearbeitet

  I tried recreating this and it doesn't seem to be working for no reason.

  home_page.hbs:

  <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
      <img src="{{asset 'loading-gif.gif'}}" class="icon" data-title="{{id}}">
      <span class="blocks-item-title">{{name}}</span>
    </a>
  </li>
  ....
  <script>
    $(document).ready(function(){
      $('.icon').each(function (idx, itm){
        var categoryID = $(this).attr('data-title');
        $(itm).attr('src', categoryIcons[categoryID]);
      });
    });
  </script>

  document_head.hbs:

  ...
  <script>
    var categoryIcons = {
        "8856217139996" : "{{asset 'Vendas-removebg-preview.png'}}"
        "8856216526876" : "{{asset 'pos-removebg-preview.png'}}",
        "8856200586012" : "{{asset 'inventario-removebg-preview.png'}}",
        "8856215484700" : "{{asset 'gestaocomercial-removebg-preview.png'}}",
        "8856216802972" : "{{asset 'legal-removebg-preview.png'}}",
        "8856216202268" : "{{asset 'CCO-removebg-preview.png'}}"
    }
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  EDIT: Found the fix. The script was missing a comma lmao..

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