Adding images/icons into the Copenhagen Theme

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

Is it possible to add gifs or loops to articles? 

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 :)

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

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

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

Hello, Anonymous 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.

Ifra Saqlain 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.